The Clarity Icons presents pixel-perfect, scalable SVG-based icons. The icon system gives you complete control over icon color, orientation, and size. Additionally, you can access and customize any SVG graphic elements inside the icon through standard CSS.
Are you using the old icons? This only describes the Clarity Core Web Components icon implemenation, which uses the
@cds/core NPM package. If you are looking for documentation about the original Clarity Icons which uses the
@clr/icons NPM package, please visit our old icons documentation (opens new window).
Follow the instructions in the Core components getting started page to install the @cds/core package.
To start rendering svg shaps or providing custom svg shapes, import the icon with the icon service
Add an icon element to the application templates as needed and specify a registered shape.
Browse and search the collection of shapes to see what Clarity ships with.
Applications can provide their own custom svg shapes if the icon library that ships with Clarity doesn't have exactly what it needs. You need to provide a unique shape name and the svg for its shape.
Once the custom shape is added, use it just like any other icon.
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 size attribute takes a string number or one of the standard Clarity t-shirt sizes.
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.
Clarity Icons also come with predefined colors using the
Colors are described as:
- highlight: use this color when you want to draw attention to the icon
- danger: use this color when you want to show errors or make the user pause and evaluate when they see this icon
- warning: use this color when you want the user to proceed with caution
- success: use this color when you want the user to know something is correct
- info: use this color when you want the user to be informed
There is also
inverse attribute, which is suitable for icons used on darker backgrounds.
Clarity Icons come with variants for badges that add visual indicators to the badge, where applicable.
- info (circle) - use this variant when you want the icon to inform
- success (circle) - use this variant when you want the icon to show something is correct
- danger (circle) - use this variant when you want this icon to show something is incorrect
- warning (circle) - use this variant when you want to show something needs caution
- warning (triangle) - use this variant when you want to show something needs caution
- danger (triangle) - use this variant when you want this icon to show something is incorrect
Note: not all icons support all variants. Check the details for specific shapes to see the variants that it supports.