Clarity Icons

Over 200 beautiful and easy to use SVG icons, flexible with variations to meet your needs

Getting started with Clarity Icons

The Clarity Icons library presents pixel-perfect, scalable SVG-based icons. This new 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.

Install and load Clarity Icons:

Install the Clarity Icons package through npm:

npm install @clr/icons --save

Install the polyfill for Custom Elements, on which Clarity Icons is dependent:

npm install @webcomponents/custom-elements@1.0.0 --save

Load the library in your app by including clr-icons.min.css and clr-icons.min.js. Also, make sure to include custom-elements.min.js, the Custom Elements polyfill before clr-icons.min.js:

<!--CLARITY ICONS STYLE-->
<link rel="stylesheet" href="path/to/node_modules/@clr/icons/clr-icons.min.css">

<!--CLARITY ICONS DEPENDENCY: CUSTOM ELEMENTS POLYFILL-->
<script src="path/to/node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>

<!--CLARITY ICONS API & ALL ICON SETS-->
<script src="path/to/node_modules/@clr/icons/clr-icons.min.js"></script>
That's it! As clr-icons.min.js loads not only the Clarity Icons Api, but also all icons sets, you will have access to more than 100 different icons that have variants, orientations, and colors out of the box. You can now render any icon with clr-icon tag and specify your desired shape in its shape attribute.

Load icon sets individually:

If you want to use icons from few individual sets, you don't have to load all icons with clr-icons.min.js. Instead, load the lighter version of Clarity Icons library with clr-icons-lite.min.js, which loads only Clarity Icons Api and Core Shapes set. For example, if you want to use icons from only Social Shapes and Travel Shapes, you would load Clarity Icons this way:

<!--CLARITY ICONS STYLE-->
<link rel="stylesheet" href="path/to/node_modules/@clr/icons/clr-icons.min.css">

<!--CLARITY ICONS DEPENDENCY: CUSTOM ELEMENTS POLYFILL-->
<script src="path/to/node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>

<!--CLARITY ICONS API & CORE SHAPES SET-->
<script src="path/to/node_modules/@clr/icons/clr-icons-lite.min.js"></script>

<!--ICON SETS-->
<script src="path/to/node_modules/@clr/icons/shapes/social-shapes.min.js"></script>
<script src="path/to/node_modules/@clr/icons/shapes/travel-shapes.min.js"></script>

Load Clarity Icons API and icon sets in Typescript:

It's easy to load Clarity Icons API and icon sets in Typescript.

If you load the Clarity Icons in Typescript, make sure you are not loading it through the script tag again. Otherwise you will have two different instances of Clarity Icons that override one another.

For example:

import '@clr/icons';
The example above is loading only Clarity Icons Api and Core Shapes set. You can load more icon sets on top of it as needed:
import '@clr/icons';
import '@clr/icons/shapes/essential-shapes';
import '@clr/icons/shapes/technology-shapes';
And lastly, if you need to use shapes from all sets, you don't need to import and load every single icon set, because you have a shortcut for loading all sets:
import '@clr/icons';
import '@clr/icons/shapes/all-shapes';

Optimize Clarity Icons in your application

Before v0.11.8, users had to import the whole icons sets even if they needed to use only a few icons from those sets. Now with v0.11.8, users can import each icon shapes as individual modules and add them to the Clarity Icons API. Leveraging this new method of importing icons with Tree-shaking process, you can make a significant optimization to the size of Clarity Icons in your application. For example, if you need to use car, pin, and star icons in an application, you can import and add them in the following way:

import { ClarityIcons } from "@clr/icons";
import { ClrShapePin } from "@clr/icons/shapes/essential-shapes";
import { ClrShapeStar } from "@clr/icons/shapes/social-shapes";
import { ClrShapeCar } from "@clr/icons/shapes/travel-shapes";

ClarityIcons.add({
  pin: ClrShapePin,
  star: ClrShapeStar,
  car: ClrShapeCar
});
You can see that each shape modules have "ClrShape" prefix in the example above. An important thing to note here is that, to take advantage of this new method, you should only load Clarity Icons by importing it from "@clr/icons" and make sure that you are not loading it via a script tag or in some other manner.