Understanding styling

Style any element of every icon with a CSS class. Style groups of elements within icons, or get down to a single path.

Before we start...

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


The basics

While we may treat SVGs like images. The <svg> tag behaves very differently than the <img> tag. SVG also uses a completely different set of CSS rules for styling. Never fear though, this guide will help you get started in no time. Let's get started.

Sizing an icon

Styling doesn't get any more basic than this. The most important thing to know about SVG is that while the contents of an SVG scale proportionally by default, proportional sizing of its bounding box isn't. In fact, browser support for proportional sizing of the <svg> tag is spotty at best. Below is an example:

circle check
circle check
circle check
.iconic-circle-check { width: 96px; }
.iconic-circle-check { height: 96px; }
.iconic-circle-check { width: 96px; height:96px; }

What this means for you is that you need to explicitly set the width and height of an SVG (no height:auto; for you!). While this is different than what we're used to, the good news is that all of Iconic's icons are placed in a square SVG container—meaning you there's no math needed to set custom dimensions.

Want to set your icons to be 72 pixels wide?

  .iconic {
    width: 72px;
    height: 72px;
  }

Want to set your header icons to be 1.5 rems high?

  header .iconic {
    width: 1.5rem;
    height: 1.5rem;
  }

You get the idea. Just set both dimensions to the same size and you'll never go wrong.

Coloring an icon

In the normal world of CSS, we're used to background-color and border-color for coloring our elements. In the world of SVG, you color paths with fill and stroke. Both rules do exactly what you think they would—they allow you to set the color of filled and stroked elements in an SVG. Iconic uses a mix of strokes and fills in its icons. Doing so keeps our SVGs slim and enables some really cool styling possibilities. It also potentially makes styling icons a little more involved. The good news is our approach to styling solves those problems.

Let's dig right into an example of how to color an icon.

bar chart
.iconic-bar-chart * {
  fill: red;
  stroke: red;
}

Perfect. A big red bar chart. The first question you probably have is why we gave every element in the icon fill and stroke colors. The second question likely why that didn't screw everything up.

The answer is that every icon comes with classes that define whether an icon is a fill or a stroke. When you add the icon to the screen, CSS rules are added that make sure only filled elements get a fill color and only stroked elements get a stroke color. This means you don't need to know the guts of an icon to style it. Just set fill and stroke and you're good to go.

It's worth noting that Iconic ships with SASS, LESS and Stylus styling templates with helper mixins that make styling even more streamlined.

Digging deeper

Style individual elements

Coloring an icon a single color is great and all, but that's pretty par for the course. What makes Iconic unique is that every element of every icon can be styled individually. Each class is exposed on our icon detail page. Just hover over the classes in the right panel to find the element you want to style.

With all that code behind the scenes, you can do things like this:

bar chart
.iconic-bar-chart-bar-1  {
  fill: green;
  stroke: green;
}

.iconic-bar-chart-bar-2  {
  fill: cyan;
  stroke: cyan;
}

.iconic-bar-chart-bar-3  {
  fill: purple;
  stroke: purple;
}

.iconic-bar-chart-bar-4  {
  fill: red;
  stroke: red;
}

.iconic-bar-chart-bar-5  {
  fill: orange;
  stroke: orange;
}

Style a group of elements

Don't need or want to style each element individually? Well, we've added classes which cover groups of elements as well. You can get the full scoop on this info as well on our icon detail page.

bar chart
.iconic-bar-chart-bar  {
  fill: cyan;
  stroke: cyan;
}

.iconic-bar-chart-axes, .iconic-bar-chart-tick-minor  {
  fill: darkgray;
  stroke: darkgray;
}

.iconic-bar-chart-tick-major  {
  fill: gray;
  stroke: gray;
}

Now that you're up to speed on how to style Iconic, you should read our guide on how to apply a theme to the entire set. Check it out!