Learn more

Design

Semantic SVGs

Style with CSS

Multi-color themes

Smart icons

3 unique sizes

Responsive

Production ready

We like grids. A lot. Each icon at each size is designed within the bounds of a pixel-precise grid.

Why does this matter? This approach results in a super-sharp, super-optimized, super-consistent collection.

Our icons aren’t just vector, they are code, SVG to be precise. SVG makes them portable, flexible, and extendable just like the web.

Iconic's SVGs are designed with markup in mind. This means that our markup is clean, clear and structured for you to work with.

One color? Boo! Iconic's semantic structure allows you to style down to an icon's minute detailwith 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.

Select an example theme

Multi-color

Multi-tone

Contained

The web is dynamicwe think icons should be as well. Our smart icons have a super-simple API which makes swapping out assets a thing of the past.

Modify icon properties with data-attributes

imgclass="iconic"
data-src="arrow.svg"
data-direction="right"
data-head="fill"
/

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.

Pixel perfect legibility at 16x16

Added detail for better communication at 32x32

Illustrative, and packed with meaning at 128x128

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.

Drag to show responsiveness

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.

script src=iconic.min.js/scriptimg class=iconic iconic-lg src=code.svg

By adding the iconic class, iconic.js automatically replaces the img tag with the full SVG markup for you, enabling all the powerful abilities of inline SVG.

The most web-friendly icons around. Get started with the Webfont, advance to the Smart SVGs.

Semantic icons are the future of iconography. However, in certain cases, a webfont is the most efficient tool for the job. Iconic ships with over 1700 icons in .woff, .ttf, .otf, .svg .eot.

These icons come with all the awesomeness Iconic has to offer. Stylable, responsive and adjustable with simple HTML or Javascript.

All the styling capabilities without the responsiveness or API hooks. Great for optimization.

Our icons distilled down to a single path. Perfect for mockups and for hyper-optimized sites.

Every icon in every size and variation comes in your basic raster format for legacy-browser support.

We love WebP! This is your go-to format if you need to use raster and want it to be as tiny as possible.