Getting started with Open Iconic
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
<img src="/open-iconic/svg/icon-name.svg" alt="icon name">
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
var mySVGsToInject = document.querySelectorAll('.iconic-sprite');
<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>
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.
Coloring icons is even easier. All you need to do is set the
fill rule on the
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">
<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>
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">
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>
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">
<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>