Meet Iconic. The definitive icon set designed for the modern web.

View icons  Get Iconic

Looking for the awesome,
multi-weight responsive icon font?

Learn more

Designed inside the box

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.

Semantic SVG built for creative freedom

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.

Style any element within icons using CSS

One color? Boo! Iconic's semantic structure allows you to style down to an icon's minute detail—with basic CSS.

Elements (hover to select)
  • .iconic-camera-slr-body
  • .iconic-camera-slr-flash-mount
  • .iconic-camera-slr-lens
  • .iconic-camera-slr-lens-barrel
  • .iconic-camera-slr-lens-glass
  • .iconic-camera-slr-lens-release
Properties
  • .iconic-property-accent
  • .iconic-property-fill

Create multi-color themes with CSS to match your brand

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

One icon, infinite possibilities

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.

Modify icon properties with data-attributes

<img class="iconic"
data-src="arrow.svg"
data-direction="right"
data-head="fill"
/>

Don't just scale, use 3 unique sizes

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.

Normalized
    Actual    
  • Small

    Pixel perfect legibility at 16x16

  • Medium

    Added detail for better communication at 32x32

  • Large

    Illustrative, and packed with meaning at 128x128

Responsive icons adjust with your audience

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

Production ready and easy to use

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"></script>
<img 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.

A complete system to display iconography,
ready for your project

ICONICWebfontsSmart SVGs
Icons1764
Precise pixel grid
Legibility-focused aesthetic
Retina-ready
Scalable to any size
Responsively switch sizes
Sizing
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
Integration
Bootstrap (drop-in replacement)
Foundation (drop-in replacement)
iOS
Android
Web ComponentsAvailable soon
Browser support
Chrome
Firefox
Safari
Mobile Webkit
IE9+
IE8+