How to Create a Theme

Iconic was designed to be themed. You have everything you need to create a custom aesthetic across the entire set.

Before we start...

Styling and theming rely on iconic.js. Read our web guide for a quick rundown on this process.


SVG & CSS

Styling SVG is a little different than regular HTML. We cover the basics of SVG + CSS in our styling guide—it's definitely worth a read.

We've done a lot of the legwork to make styling straightforward. Some of that legwork involves a few crucial CSS rules that makes everything run smoothly.

So make sure to use our the icon theme starter kit provided with Iconic which can be found at css/themes/theme-starter-kit.css.**

But enough of talking in the abstract, let's dig into the details!

Painting with broad strokes

We define a theme as any styling that applies across our entire set. So the simplest theme would be setting Iconic in a single color. Lucky for you this only takes one simple rule.

tools
envelope open
compass
.iconic * {
  fill: pink;
  stroke: pink;
}
There, you've just colored all your icons pink. It may seem strange that we're setting all icon elements to have a fill and a stroke color. Our theme starter kit has rules that make sure that only filled elements get fill colors and stroked elements get stroke colors. This means you don't need to know whether an element is stroked or filled—just set both values and we'll figure out the rest.

Adding detail

One color is nice, but sometimes you'd like a little more variation. We've thought of that and have defined certain elements within our icons as accents. All accent elements are given the iconic-property-accent class. Let's say you want to add a secondary color of gray. This would also takes just one rule:

tools
envelope open
compass
.iconic-property-accent {
  fill: gray;
  stroke: gray;
}
Now all of your icons that have accent elements will be colored gray. You now officially have a duo-toned icon set with two CSS rules. Not bad.

Adding special conditions

Another great thing about Iconic is that one icon can have many looks all within the same theme. Want to add a duo-toned active style to all your icons? Piece of cake.

  .iconic-state-active * {
    fill: yellow;
    stroke: yellow;
  }
  .iconic-state-active .iconic-property-accent {
    fill: lightgray;
    stroke: lightgray;
  }

We think it's a good habit to prefix all your Iconic classes with iconic. You could name your active state class whatever you'd like, but we suggest naming it like the example above.

Now you can apply an active state to any of your icons by adding the iconic-state-active class in your HTML.

envelope open
envelope open
<!-- Icon with no active state -->
<img data-src="envelope.svg" class="iconic" data-state="open" alt="envelope open">

<!-- Icon with an active state -->
<img data-src="envelope.svg" class="iconic iconic-state-active" data-state="open" alt="envelope open">

Creating touchups

Themes will often need to give a little love to individual elements of certain icons.

Every element of each icon in Iconic has a unique class that allows it to be styled individually. This means you have fine-grained control of how your theme will be applied to Iconic. So, let's say you wanted a slightly different duo-toned look for your compass. No problemo!

compass
.iconic-compass-needle {
  fill: pink;
  stroke: pink;
}

.iconic-compass-needle-axis,
.iconic-compass-direction {
  fill: gray;
  stroke: gray;
}

There you go, you've just officially tweaked your theme. Remember, you can get a detailed breakdown of every class for every icon (including the compass icon) from our icons page.

Putting it all together

Order your styles as such:

  1. Broad strokes
  2. Detail
  3. Special Conditions
  4. Touchups

Make sure to put all your touchups below the broader theming rules to ensure they get applied*

Power tools

Like CSS pre-processors? Us too.

We think theming Iconic is pretty streamlined... But we've made it even streamlinier with our SASS, LESS and Stylus templates. These templates have helpful mixins which make coloring your icons just that much simpler.

.iconic * {
  @include iconic-color(pink);
}

If you've never used CSS pre-processors, now's a great time to get started. For those of you who get hives at the thought of opening up the command line, we'd suggest CodeKit to making compiling CSS a little more approachable.

We've also added a couple quick examples in the theme that you can use as reference.

Where to go from here

Now it's your turn to make a theme. Iconic comes with a nice collection of themes and helpful kits to help you get moving. We suggest using one of our themes in css/themes as a starting point.