Iconic has a new, bigger, better sibling

Tour Pro

  • Envelope Semantic SVGs

  • Camera Slr Style with CSS

  • Aperture Multi-color themes

  • Arrow Smart icons

  • Zoom 3 unique sizes

  • Microphone Responsive

  • Code Production ready

  • Compass How-tos

OpenIconic

An open source icon set with 223 marks in SVG, webfont and raster formats

Download v1.1.0Github

  • Bootstrap and Foundation ready

    Ready-to-use fonts and stylesheets that work with your favorite frameworks.

  • Hyper-legible

    We're not joking. Open Iconic is designed to be legible down to 8 pixels.

  • Super small file size

    It's incredible just how small Open Iconic is. Our icon font WOFF is 12.4Kb (nearly 4 times smaller than Font Awesome).

  • All the formats you need

    More than you can shake a stick at to be honest. SVG, PNG, WebP, EOT, OTF, TTF, WOFF, OMG!

  • Open source & free

    If you're not ready for Iconic (yet), this is the next best stop. Open Iconic will always be free and open and awesome.

Keep track of new hotness

Magnifying Glass

Getting started with Open Iconic

SVG

Displaying Open Iconic's SVGs are a snap. Just treat them like your typical image and away you go! Pro tip: Don't forget the alt attribute.

<img src="/open-iconic/svg/icon-name.svg" alt="icon name">

SVG Sprite

Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack. Adding an icon from an SVG sprite is a little different than what you're used to, but it's still not a problem. You'll need to add the icon sprite to the DOM in order support backwards browsers like Internet Explorer. Luckily, SVGInjector makes that a snap. Read more about this process here.


Tip: To make your icons easily style able, we suggest adding a general class to the <svg> tag and a unique class name for each different icon in the <use> tag.

<head>
  ...
  <script src="svg-injector.min.js"></script>

  <script>
    // Elements to inject
    var mySVGsToInject = document.querySelectorAll('.iconic-sprite');

    // Do the injection
    SVGInjector(mySVGsToInject);
  </script>
  ...
</head>
<body>
...
  <img src="open-iconic.svg" class="iconic-sprite" style="display:none;" />

  <svg viewBox="0 0 8 8" class="icon">
    <use xlink:href="#account-login" class="icon-account-login"></use>
  </svg>
...
</body>

Sizing icons only needs basic CSS. All the icons are in a square format, so just set the <svg> tag with equal width and height dimensions.

.icon {
  width: 16px;
  height: 16px;
}

Coloring icons is even easier. All you need to do is set the fill rule on the <use> tag.

.icon-account-login {
  fill: #f00;
}

Font

Icon fonts are a great fallback for SVG—and our font is pretty great.

<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">
Body
<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>

Bootstrap Font

Use Bootstrap? We have a collection of stylesheets which are designed to work perfectly with it.

<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
Body
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>

Foundation Font

Iconic also works for Foundation and functions just like Foundation's icon font.

<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">
Body
<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>

License

Open Iconic's icons are licensed under the MIT Licence and its fonts are under the Open Font License.

Attribution

Open Iconic doesn't require attribution, but we sure appreciate it. If you're feeling generous, add the following somewhere in your project:
"Open Iconic — www.useiconic.com/open"