Iconic for Web

Iconic is built for and of the web. Here's how to get going...

Iconic is an advanced, feature-rich system... but we don't want using it to feel like having bees live in your head. We want using Iconic to be an easy and awesome experience so all your projects are beautiful, flexible and launch on time and under budget.

Icon, meet Page

At the core of Iconic's system is an lovingly handcrafted set of SVG icons that you can quickly start using by adding them via img tags.

<img src="book.svg">

Just the beginning

Using img tags to add SVGs to a page is simple but when embedded this way they're limited and can't be styled directly with your page's CSS or manipulated via JavaScript.

Technically, SVGs embedded via an img tag live in their own Parse Tree

Styling and Themeing are just two of the powerful features of Iconic. To unlock Iconic's full potential the icon's SVG markup must be included directly on the page, like so:


  <svg version="1.1" class="iconic-book-open-lg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="122px" height="86px" viewBox="0 0 122 86">
  <title class="iconic-meta">Book</title>
  <g data-width="120" data-height="128" class="iconic-lg" display="inline">
    <path d="M6 112c-3.3 0-6 2.7-6 6v4c0 3.3 2.7 6 6 6h114v-4h-112c-2.2 0-4-1.8-4-4s1.8-4 4-4h112v-4h-114z" class="iconic-book-bottom iconic-element-fill" />
    <path d="M6 109.7v-109.7h-1v.1c-2.8.5-5 2.9-5 5.9v106.7c1.5-1.7 3.6-2.7 6-2.7h.1c-.1-.1-.1-.2-.1-.3z" class="iconic-book-spine iconic-element-fill" />
    <path d="M120 2.8c-.1-1.6-1.4-2.8-3-2.8h-13v52l-6-6-6 6v-52h-84v109.7c0 .1 0 .2-.1.3h112.1v-107.2z" class="iconic-book-cover iconic-element-fill" />

Let us carry that for you

You're probably going to be using multiple icons in your project, possibly including some Responsive and Smart Icons. Although Iconic SVG files are optimized for size and structure, they can still contain quite a few lines of markup and code. Wrangling and maintaining a bunch of inline SVG on your pages isn't anyone's idea of good time. Is there an easier way?

Enter... iconic.js

<script src="iconic.min.js"></script>
<img class="iconic" data-src="book.svg">

Wait, what just happened there?! It looks the same.

Exactly, but now the full SVG source is available inline in the html. (Go ahead, take a peek.)

iconic.js is our front-end JavaScript library that makes using Iconic fast and simple. One of its core features is the ability to dynamically inject SVGs. By adding the iconic class, iconic.js will automatically replace the img tag with the full SVG markup for you when the page loads.

The simplicity of developing with concise img tags combined with the full control possible when you have SVG inline on your page... two great tastes that taste great together!