Use it
Link the stylesheet and add a class
The stylesheet holds all three fonts, and the class decides which font an icon uses.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@uixicons/icons/css/uix-icons.css">
<i class="uix uix-home"></i>
<i class="uix uix-sharp uix-home"></i>
<i class="uix uix-solid uix-home"></i>.nav .uix { font-size: 20px; color: #6301E4; }Files
Pick the files you need
| File | Holds |
|---|---|
| css/uix-icons.css | All three fonts and every class |
| css/uix-icons-regular.css | Regular Rounded only |
| css/uix-icons-sharp.css | Regular Sharp only |
| css/uix-icons-solid.css | Solid only |
| fonts/ | woff2, woff and ttf for each style |
| codepoints.json | The code point of every icon, fixed between releases |
Self-host for speed
Install the npm package and copy the css and fonts folders to your own server. That avoids a request to another domain and works offline.
Free and Pro
What the font holds
Free styles only
The font has Regular Rounded, Regular Sharp and Solid. Fonts hold one colour, so layered and effect styles such as Duotone and Gradient are not part of it. Use SVG for those.
FAQ
Questions
Do the class names match the icon names?
Yes. The class is uix- followed by the library name of the icon, so home is uix-home and shopping-cart is uix-shopping-cart. Sharp and Solid add one more class, uix-sharp or uix-solid, in front of the icon class. The names match what you see in the icon browser, so you can search there and paste the class straight in.
Will code points change?
No. Code points are kept in a file called codepoints.json and stay fixed from release to release. An icon keeps its code even when the library grows, so a saved code point never starts to show a different icon. That makes it safe to store the code in a database or a design token.
Is a font better than SVG?
A font is quick to set up and easy to size and colour in text. SVG gives crisp edges at every size, works with more styles and is better for accessibility labels. Many teams use the font for prototypes and SVG in production.
How do I label an icon for screen readers?
Add aria-hidden to decorative icons so screen readers skip them. For an icon that stands alone, such as a button with no text, add aria-label and role img to the element, or put visible text next to it. Visible text is always the most reliable label.
Pick an icon and ship it today
Search the library, copy the code you need and drop it into your project.