We like grids. A lot. Each icon at each size is designed within the bounds of a pixel-precise grid.
Our icons aren’t just vector, they are code, SVG to be precise. SVG makes them portable, flexible, and extendable just like the web.
One color? Boo! Iconic's semantic structure allows you to style down to an icon's minute detail—with basic CSS.
Want to style every icon green, or match all seven of your brand colors? We have sample themes with variables in SCSS & LESS to get you going.
The web is dynamic—we think icons should be as well. Our smart icons have a super-simple API which makes swapping out assets a thing of the past.
Just because vector icons are infinitely scalable doesn't mean they're infinitely legible. Iconic's three sizes aren't just scaled versions of the same icon, their detail adapts to their size.
Since all of our icons come in three designed sizes, we thought we might as well take advantage of it. Our icons can automatically adjust to a viewer's screen size.
To unlock the full power of Iconic's features we've created a helper library called iconic.js. Just put it on your page, add the iconic class to your img tags and you're set.
|Precise pixel grid|
|Scalable to any size|
|Responsively switch sizes|
|Small icons (16x16)|
|Medium icons (32x32)|
|Large icons (128x128)|
|Theming (customize a group of icons)|
|Mult-color with CSS|
|Multi-tone with CSS|
|Duo-tone with CSS|
|One-color with CSS|
|Styling (customize a single icon)|
|Style with any color|
|Style with one color|
|Bootstrap (drop-in replacement)|
|Foundation (drop-in replacement)|
|Web Components||Available soon|