Getting Started

Installation Configuration

Components

Alert Badge Button Card Dialog Dropdown Icon Menu Table Tile Toggle Tooltip Typography

Icons

We've included a convenient wrapper for Heroicons to make it easier to use icons in your project. Massive thanks to the folks from Tailwind Labs for creating such a great MIT-licensed icon set.

Using Icons

To use an icon, simply prefix the icon name with <ui:icon-. For example:

1<ui:icon-swatch />
1<ui:icon-swatch />
Copied!
Icon Example
Copied!
 
1<div class="text-center p-20">
2    <ui:icon-swatch />
3</div>
1<div class="text-center p-20">
2    <ui:icon-swatch />
3</div>

Variants

The <ui:icon> component also supports the micro, mini, solid, and outline (default) variants provided by Heroicons. Simply pass the variant name as a property.

1<ui:icon-swatch variant="micro" />
1<ui:icon-swatch variant="micro" />
Copied!
Icon Variants
Copied!
Outline
Solid
Mini
Micro 
 1<div class="flex gap-2 items-center">
 2    <ui:icon-swatch variant="outline" />
 3    <span>Outline</span>
 4</div>
 5<div class="flex gap-2 items-center">
 6    <ui:icon-swatch variant="solid" />
 7    <span>Solid</span>
 8</div>
 9<div class="flex gap-2 items-center">
10    <ui:icon-swatch variant="mini" />
11    <span>Mini</span>
12</div>
13<div class="flex gap-2 items-center">
14    <ui:icon-swatch variant="micro" />
15    <span>Micro</span>
16</div>
 1<div class="flex gap-2 items-center">
 2    <ui:icon-swatch variant="outline" />
 3    <span>Outline</span>
 4</div>
 5<div class="flex gap-2 items-center">
 6    <ui:icon-swatch variant="solid" />
 7    <span>Solid</span>
 8</div>
 9<div class="flex gap-2 items-center">
10    <ui:icon-swatch variant="mini" />
11    <span>Mini</span>
12</div>
13<div class="flex gap-2 items-center">
14    <ui:icon-swatch variant="micro" />
15    <span>Micro</span>
16</div>

A note on sizing

The icons are sized by variant to match the size each variant was designed for. Usually best to stick with that size, but if you need to deviate use the Tailwind CSS Sizing utilities. Be warned that for some sizes you might need to use the important modifier from Tailwind CSS.

Like this project? Stop by the bear cave to stargaze.