How to use Iconify in pages

Adding icons to pages is very simple:

  1. Add script tag to include Iconify. You can add it in head section (before </head>) or at the end of page before </body>: <script src="//code.iconify.design/1/1.0.0-rc5/iconify.min.js"></script>
  2. Add icon placeholder to wherever you want to put icon: <span class="iconify" data-icon="fa-home"></span> Instead of "fa-home" write correct icon name.

Look in icon collections to find icons. Click any icon to see HTML code for that icon.

Syntax

Element must have tag other than svg. Usually its span, but you can use any element: i, strong, whatever

Element must have "iconify" among list of classes.

Element must have data-icon attribute with icon name as value, unless icon uses alternative syntax (see below).

You can also use special element iconify-icon that does not require class attribute.

<p>
    Any tag with class and data-icon:
    <span class="iconify" data-icon="fa:home"></span>
    <i class="iconify" data-icon="mdi-account-off"></i>
    <strong class="iconify some-custom-class" data-icon="flat-color-icons:cancel"></strong>
</p>
<p>
    Special iconify-icon tag without class:
    <iconify-icon data-icon="flat-color-icons:voice-presentation"></iconify-icon>
</p>

Result:

Any tag with class and data-icon:

Special iconify-icon tag without class:

Icon name syntax is data-icon="prefix:icon" or data-icon="prefix-icon". Second syntax can be used if prefix does not contain "-".

For example, data-icon="fa-arrow-left" and data-icon="fa:arrow-left" are identical (both have prefix "fa"), but data-icon="flat-color-icons:voice-presentation" and data-icon="flat-color-icons-voice-presentation" are not the same (first has prefix "flat-color-icons", second has prefix "flat" that does not exist).

Custom iconify-icon tag

iconify-icon is a made up tag. Its not a part of any standard.

You don't have to use it, you can use span, i or any other tag. Difference is iconify-icon creates clear markup that is easy to read, it doesn't require class and data-inline attributes.

Is it a valid tag? Yes, it is. It is a valid custom tag, defined in Iconify code. Older browsers (IE9-11) treat it similar to div.

What about validators? Modern validators support custom elements, therefore iconify-icon will pass validator. If it doesn't pass validator, that validator is outdated.

Iconify was designed to be as easy to use as possible.

You can change icons dimensions and color with CSS. It works exactly like glyph fonts:

Color

This applies only to monotone icons. Colored icons, such as emoji, have hardcoded palette that cannot be changed.

To add color to monotone icon simply change text color.

Example

Stylesheet:

/* Change all icons "mdi:home" to red */
.iconify[data-icon="mdi:home"] {
  color: #f00;
}

/* Change all icons inside ".light-blue-block" to #08f */
.light-blue-block .iconify {
  color: #08f;
}

HTML:

<p>Red home icon: <span class="iconify" data-icon="mdi:home"></span></p>
<p class="light-blue-block">
    All content inside this div is light blue,
    including umbrella icon:
    <span class="iconify" data-icon="fa-umbrella"></span>
    and horizontally flipped attachment icon:
    <span class="iconify" data-icon="entypo-attachment" data-flip="horizontal"></span>
</p>

Result:

Red home icon:

All content inside this div is light blue, including umbrella icon: and horizontally flipped attachment icon:

Dimensions

By default all icons have height of 1em, width is calculated automatically from original icon's width/height ratio.

To change icon size set font-size.

Example

Stylesheet:

/* Big red alert! */
svg[data-icon="mdi-alert"] {
  font-size: 48px;
  color: #ba3329;
}

/* Different sizes for different paragraphs */
.small {
  font-size: 14px;
  line-height: 20px;
}

.medium {
  font-size: 18px;
  line-height: 26px;
}

HTML:

<div class="alert">
    <iconify-icon data-icon="mdi-alert"></iconify-icon>
</div>
<p class="small">Small text with <span class="iconify" data-icon="noto-alien"></span> alien emoji!</p>
<p class="medium">Someone went overboard with emojis here:
    <span class="iconify" data-icon="emojione-alien-monster"></span>
    <span class="iconify" data-icon="emojione-anguished-face"></span>
    <span class="iconify" data-icon="emojione-astonished-face"></span>
    <span class="iconify" data-icon="emojione-dog-face"></span>
    <span class="iconify" data-icon="emojione-bird"></span>
</p>

Result:

Small text with alien emoji!

Someone went overboard with emojis here:

Usually that's all you need to do.

However there are more options:

Alternative syntax

Sometimes it is not possible to add custom attributes to element. For example, if everything about icon should be placed in one string in configuration of some software.

Do not worry, Iconify supports different syntax that uses class names instead of attributes.

This syntax is not available for custom tags, such as iconify-icon. It should be used with span or i tag.

Changes are simple: instead of data- attribute add icon- class, separating value with :

Value must not have quotes and spaces!

  • data-icon="icon-name" is changed to class="iconify icon:icon-name"
  • data-inline="false" is changed to class="iconify icon-inline:false"
  • data-rotate="90deg" is changed to class="iconify icon-rotate:90deg"
  • data-flip="horizontal vertical" is changed to class="iconify icon-flip:horizontal,vertical" (not that space is replaced with comma - flip and align values can be separated by both spaces or commas)

This syntax cannot be used with iconify-icon tag. So to use it with block icons use add inline attribute:

<span class="iconify icon:emojione-monotone:ping-pong icon-width:24px icon-height:24px icon-flip:horizontal icon-inline:false" style="color: red;"></span>

You can mix class names and data attributes, however when using both attribute and class name for same property, class name has priority. For example:

<span class="iconify icon:emojione-monotone:ping-pong icon-width:24px" data-width="32px"></span>

In sample above width is set using icon-width:24px and data-width="32px". Since class has priority, icon will have width of 24px.