How to use Iconify in CSS

Try to avoid using syntax explained in this tutorial. Loading many small images is much slower than loading icons in bulk. Try to use syntax explained in previous tutorial whenever you can. Use background images only if you have no other option.

If you are migrating from font, you might be used to adding icons by adding pseudo elements to stylesheet, something like this:

.whatever:after {
    content: '\f015';
    font-family: FontAwesome;
}

It can be done with Iconify too, but its a bit harder and not recommended.

Iconify API can generate background images that you can use in stylesheet. You can use it as content for pseudo elements or as background images:

/* SVG as pseudo element's content */
.some-item:after {
    content: url('https://api.iconify.design/fa-home.svg?color=%23ba3329&height=16');
}

/* SVG as pseudo element's background image */
.another-item:after {
    content: '';
    width: 1em;
    height: 1em;
    display: inline-block;
    background: url('https://api.iconify.design/fa-home.svg?color=%23ba3329') no-repeat center center / contain;
}

/* SVG as background image */
.third-item {
    background: url('https://api.iconify.design/fa-home.svg?color=%23ba3329') no-repeat center center / contain;
}

However there are several issues:

  • SVG as pseudo element content cannot inherit color from parent element. That is not an issue for colored images, but it is an issue for monotone images.
  • If you are using image as pseudo element's content (see examples above), you must specify width or height.
  • Every image will be loaded separately. That increases number of HTTP(S) requests and increases page loading time. Because of this try to avoid using background images.

Syntax

Each method uses SVG URL.

Syntax for SVG URL is simple:

  1. url('https://api.iconify.design/
  2. name of icon, such as fa-home in example above
  3. .svg
  4. optional parameters, such as color or height ?color=red
  5. ')
url('https://api.iconify.design/fa-home.svg?color=red')

Color

One downside of using SVG as external resource is it cannot inherit color from parent element.

This example shows 3 monotone icons, one is used as DOM element, one as pseudo element's content, one as background:

CSS:

.pseudo-test:after {
  content: url('https://api.iconify.design/mdi-pencil-circle.svg?height=16');
  vertical-align: -0.125em;
}

.background-test {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background: url('https://api.iconify.design/mdi-pencil-circle.svg') no-repeat center center / contain;
}

HTML:

<p style="color: #ba3329">
    Icon as inline SVG: <span class="iconify" data-icon="mdi-pencil-circle"></span><br />
    Icon as pseudo element's content: <span class="pseudo-test"></span><br />
    Icon as background: <span class="background-test"></span>
</p>

Result:

Icon as inline SVG:
Icon as pseudo element's content:
Icon as background:

To change color add parameter color to icon URL:

.pseudo-test:after {
    content: url('https://api.iconify.design/mdi-pencil-circle.svg?height=16&color=%23ba3329');
}

This applies only to monotone icons. Icons that have hardcoded palette don't need color attribute.

In URLs character "#" must be encoded, so replace "#" with "%23". In example above color value is "#ba3329".

Dimensions

You can also specify dimensions to SVG URL as parameters. It is pointless if you are using background-size to resize background (see "/ contain" part of code in examples above), but it is needed for using SVG as pseudo element's content.

To specify custom dimensions add width and/or height parameters:

https://api.iconify.design/fa-home.svg?width=24&height=24

If you don't specify units, API assumes its pixels.

If you specify only one size attribute, other attribute is calculated using width/height ratio of icon. For example, if original icon is 512x1024, setting ?height=16 will result in width="8".

There is special keyword auto that sets dimensions to original dimensions of icon:

https://api.iconify.design/fa-home.svg?height=auto

No need to set both width and height to auto, one parameter is enough (see above about width/height ratio).

Transformations

You can transform SVG generated by Iconify API, same as with placeholder elements.

Possible transformations:

  • Rotations: 90°, 180°, 270°
  • Horizontal and vertical flip

Rotating background

To rotate icon add rotate parameter. Value can be in degrees: rotate=90deg or as numbers: rotate=1 (where 1 = 90deg, 2 = 180deg, 3 = 270deg).

All transformations are done using SVG transforms, not CSS.

Stylesheet:

.sample:after {
  padding-left: 4px;
}
.rotation-0:after {
  content: url('https://api.iconify.design/noto-spiral-calendar.svg?height=32');
}
.rotation-90:after {
  content: url('https://api.iconify.design/noto-spiral-calendar.svg?height=32&rotate=90deg');
}
.rotation-180:after {
  content: url('https://api.iconify.design/noto-spiral-calendar.svg?height=32&rotate=180deg');
}
.rotation-270:after {
  /* 270deg = 3 */
  content: url('https://api.iconify.design/noto-spiral-calendar.svg?height=32&rotate=3');
}

HTML:

<span class="sample rotation-0">No rotation:</span><br />
<span class="sample rotation-90">90&deg; rotation:</span><br />
<span class="sample rotation-180">180&deg; rotation:</span><br />
<span class="sample rotation-270">270&deg; rotation:</span><br />

Result:

No rotation:
90° rotation:
180° rotation:
270° rotation:

Flipping background

To flip icon add flip parameter. Value is horizontal or vertical. If you want both, use horizontal,vertical or rotate icon by 180 degrees.

All transformations are done using SVG transforms, not CSS.

Stylesheet:

.sample:after {
  padding-left: 4px;
}
.original-icon:after {
  content: url('https://api.iconify.design/noto-spiral-calendar.svg?height=32');
}
.flip-horizontal:after {
  content: url('https://api.iconify.design/noto-spiral-calendar.svg?height=32&flip=horizontal');
}
.flip-vertical:after {
  content: url('https://api.iconify.design/noto-spiral-calendar.svg?height=32&flip=vertical');
}
.flip-both:after {
  content: url('https://api.iconify.design/noto-spiral-calendar.svg?height=32&flip=horizontal,vertical');
}
.flip-and-rotate:after {
  content: url('https://api.iconify.design/noto-spiral-calendar.svg?height=32&rotate=3&flip=horizontal');
}

HTML:

<span class="sample original-icon">Original icon:</span><br />
<span class="sample flip-horizontal">Horizontal flip:</span><br />
<span class="sample flip-vertical">Vertical flip:</span><br />
<span class="sample flip-both">Horizontal and vertical flip (same as 180&deg; rotation):</span><br />
<span class="sample flip-and-rotate">Mixing rotation and flip:</span><br />

Result:

Original icon:
Horizontal flip:
Vertical flip:
Horizontal and vertical flip (same as 180° rotation):
Mixing rotation and flip:

You can use both rotation and flip on icon. Icon is flipped first, then rotated.