How to use Clarity Icons

Set icon size:

By default, the size for Clarity Icons is 16 by 16 pixels, and you have two ways of customizing this default value. One is through the use of the size attribute; the other is manually customizing the width and height values in your icon's style. Both of the methods above will produce this result:

Rotate icons:

The default rotation for every shape in Clarity Icons is 0 degrees. With directional icons such as arrows and carets, 0 degrees means it points up. To rotate an icon to another direction, specify that either in the shape or dir attribute. Alternatively, you can set the rotation values in the icon's style attribute. All three methods above will produce this result:

Flip icons:

You can flip icons horizontally or vertically through the use of the flip attribute.

Make Icons Accessible:

Add a custom title to your icon using the title attribute. Adding a title improves the accessibility of the icon, making it recognizable by screen readers. Title attribute also helps you to localize your Icon.

Predefined Clarity color classes for icons:

Clarity Icons also come with predefined color classes.

There is also is-inverse color class, which is suitable for icons used on darker backgrounds.

Display variant icons:

Clarity Icons come with variants of each icon where applicable. Variants may include:

Class name What it does
.is-solid Replaces the default outlined style of the icon with a filled-in solid version for icons that have a solid version.
.has-alert Causes a small yellow triangle to appear in the top right corner of an icon that supports it.
.has-badge Causes a small dot to appear in the top right corner of an icon that supports badging. By default, this dot is red.
.has-badge--success Causes a small green dot to appear in the top right corner of an icon that supports badging.
.has-badge--error Causes a small red dot to appear in the top right corner of an icon that supports badging.
.has-badge--info Causes a small blue dot to appear in the top right corner of an icon that supports badging.

Displaying an icon variant only requires adding a CSS class to your clr-icon element. Applicable classes are listed below.

Manipulate the inline SVG graphic elements via CSS

After adding clr-icon in your HTML, check it with a web inspection tool. You will find that SVG elements are injected inside the clr-icon tag that responsible for drawing the icon.

You can individually select any of these SVG graphic elements and stylize them through CSS. For easier access to the individual graphic parts of the icon, each piece of the glyph has a unique number identifier. For example, .clr-i-outline-path-3 targets the third path in the outlined version of an icon.

There are also a couple of common CSS classes that can help you target common elements. .clr-i-badge targets the round dot in badged icons. Likewise, .clr-i-alert targets the yellow triangle in alerted icons. Both of these classes work across solid and outlined icons.