Drag & Drop ur SVGs on the Grumpicon plz.

Downlode it!

What Is This

Issues?

Grunticon makes it easy to use HD-ready (retina) vector illustrations, icons, and background images in your web project without the hassles of spotty browser compatibility. The tool processes a set of SVG files, generates PNG fallback images for legacy browsers, and exports a demo page showing how to use the final icons. Visit the GitHub repo for the command line version or to learn more about how grunticon works

To start, export SVG files for each of your images, drop those files onto the grumpy animal above, then click the 'Downlode it!" button to grab the files.

Once downloaded, check out preview.html to see a preview of your icons and their class names. To integrate in your site, you can drop the exported files into a folder on your site and paste the contents of grunticon.loader.txt into the head section of your HTML templates. Note: Be sure to replace the 4 [YOUR PATH HERE] parts of that text with the path to your own grunticon files (a root-relative path often works best across a whole site).

Close
Your browser does not support all the functionality needed to run the full version of this application. It is suggested that you use the latest version of Chrome or Firefox.

Preview the files

Export Preview

icons.data.svg.css


						
						

icons.data.png.css



						

icons.fallback.css


						
						
						
						

preview.html

<!doctype HTML>
<html>
	<head>
		<title>Icons Preview!</title>
		<!-- Grunticon Loader: place this in the head of your page -->
		<script>
		/* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
		window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!(!t.document.createElementNS||!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0];r.rel="stylesheet",r.href=e[o&&n?0:o?1:2],a.parentNode.insertBefore(r,a)},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
		grunticon( [ "icons.data.svg.css", "icons.data.png.css", "icons.fallback.css" ] );</script>
		<noscript><link href="icons.fallback.css" rel="stylesheet"></noscript>
	</head>
	<body>
		
	</body>
</html>