Usage

Using an icon is as simple as adding an <i> or <span> tag with the appropriate class name.

Basic Icon

<!-- Basic Icon -->
<i class="if-user"></i>

Styled Icon

<!-- Styled Icon -->
<i class="if-health is-color-red-5 is-size-4xl is-anim-pulse"></i>

Dynamic Changes

Use prefixes like dark: and hover: to dynamically change your icon.

<!-- Dynamic Icon -->
<i class="if-bulb is-color-blue-2 dark:is-color-amber-4 is-size-4xl hover:is-anim-pop"></i>

Arbitrary Value

NOTE

IconForge supports arbitrary values. Simply place the value between square brackets [VALUE].

<!-- Arbitrary Icon-->
<button class="is-sq hover:is-clickable">
    <i class="if-iconforge is-color-[#ffad8c] is-size-[64px]"></i>
</button>