What it does
Grunticon is an archived Grunt task that generates icon CSS and PNG fallbacks from SVG or PNG inputs. Its loader selects a delivery route, with optional SVG embedding for styling and scripting. It remains relevant to existing builds, and its code is MIT licensed.
Grunticon is archived and no longer maintained, so its useful role is understanding or maintaining an existing Grunt build. It turns a folder of SVG or PNG images into three CSS routes: SVG data URLs, PNG data URLs and references to generated PNG files. A small loader chooses the appropriate route, and an HTML preview accompanies the output.
Set an input file pattern and destination in the Grunt task, then add that task to the build. Keep generated files in a dedicated destination: matching filenames there are overwritten. Options control CSS prefixes, custom selectors and fallback paths; filename-driven colour variants create additional asset copies and increase output size.
For an icon that needs styling or scripting, enable enhanceSVG and mark the element for embedding. The loader can then insert the SVG into the document. Embedding adds execution work, so the project recommends it only for icons that need those effects. The code has MIT terms.
Strengths
- Generated previews show the available icon output.
- CSS prefixes, custom selectors and fallback paths are configurable.
- Selected icons can be embedded for direct styling or scripting.
Watch out for
- The project is archived and no longer maintained.
- Generation can overwrite matching filenames in the destination.
- Each colour variation adds another asset representation.
Best for
- Maintainers of existing Grunticon-based sites
- Teams investigating legacy SVG and PNG fallback output
Sources
- Grunticon README (Oct 27, 2026)
- Grunticon MIT License (Oct 27, 2026)