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.
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.
You can flip icons horizontally or vertically through the use of the flip attribute.
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.
Clarity Icons also come with predefined color classes.
There is also is-inverse
color class, which is suitable for icons used on darker backgrounds.
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.
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.