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.