Icons

WojoIcons is a custom icon font with over 350 outlined dual-tone glyphs across UI, commerce, media, social, and developer categories. Every icon is rendered with a single <i class="icon {name}"> element — no SVG, no JavaScript, no build step. Color, size, shape, and animation modifiers are additive CSS classes. The browser below reads the names directly from the loaded stylesheet so new icons appear automatically.

Icon Browser

Search icons by name. Click any icon to copy its HTML to the clipboard.

Usage

Add icon as the first class, then append the icon name classes separated by spaces. Multi-word icon names use one class per word — for example bubble chat notification uses three classes. Use the browser above to find names; click any icon card to copy the ready-to-paste HTML.

<i class="icon home"></i>
<i class="icon add circle"></i>
<i class="icon bubble chat notification"></i>
<i class="icon gear"></i>

Color Inheritance

Icons inherit the current text color by default so they automatically match their surrounding context. To set an explicit color, use the color modifier classes documented in the Colors section.

3 messages Saved

<!-- Icons inherit parent text color -->
<span><i class="icon mail"></i> 3 messages</span>

<button class="wf-btn wf-btn-primary">
  <i class="icon add"></i> New item
</button>

Sizes

Two independent size systems. Legacy semantic modifiers go before icon . Utility scale modifiers go after icon as an extra class.

Legacy semantic sizes (modifier before icon)

puny
.625rem

mini
.75rem

tiny
.875rem

small
1rem

default
1.5rem

Utility scale (class after icon)

wf-icon-xs
0.75rem

wf-icon-sm
0.875rem

wf-icon-md
1.25rem

wf-icon-lg
1.5rem

wf-icon-xl
2rem

wf-icon-2xl
2.5rem

wf-icon-3xl
3rem

<!-- Legacy: modifier BEFORE icon -->
<i class="puny icon home"></i>
<i class="mini icon home"></i>
<i class="tiny icon home"></i>
<i class="small icon home"></i>

<!-- Utility scale: modifier AFTER icon -->
<i class="icon wf-icon-xs home"></i>
<i class="icon wf-icon-sm home"></i>
<i class="icon wf-icon-md home"></i>
<i class="icon wf-icon-lg home"></i>
<i class="icon wf-icon-xl home"></i>
<i class="icon wf-icon-2xl home"></i>
<i class="icon wf-icon-3xl home"></i>

Colors

Color modifier classes go before icon . Adding inverted between the color name and icon switches to the tinted light-surface variant, useful on colored or dark backgrounds.

Solid colors

primary

secondary

positive

negative

alert

info

indigo

sage

plum

Inverted (tinted surface variant)

primary inverted

secondary inverted

positive inverted

negative inverted

info inverted

alert inverted

<!-- Color modifier BEFORE icon -->
<i class="primary icon star"></i>
<i class="positive icon star"></i>
<i class="negative icon star"></i>

<!-- Inverted variant -->
<i class="primary inverted icon star"></i>

Modifiers

Animation

icon spinning

<i class="icon spinning refresh"></i>
<i class="icon spinning gear"></i>

Flip & Rotate

default

flipped

rotated (+90°)

rotated (−90°)

<!-- Flip modifiers BEFORE icon -->
<i class="flipped icon arrow long right"></i>
<i class="vertically flipped icon arrow long right"></i>

<!-- Rotation modifiers BEFORE icon -->
<i class="rotated icon arrow long right"></i>
<i class="left rotated icon arrow long right"></i>

Shape Borders

wf-circular

wf-circular medium

wf-circular large

wf-rounded

wf-rounded medium

primary wf-circular

<!-- Shape classes go AFTER icon -->
<i class="icon wf-circular star"></i>
<i class="icon wf-circular medium star"></i>
<i class="icon wf-rounded star"></i>

<!-- Combine with color -->
<i class="primary icon wf-circular star"></i>

States

normal

disabled

active

selectable

<i class="icon disabled gear"></i>
<i class="icon active gear"></i>
<i class="selectable icon gear"></i>

Class Reference

All modifier classes available on i.icon

Class pattern	Applies	Description
icon {name}	Base	The icon element. icon is required; {name} is one or more dot-separated words from the browser (e.g. icon home · icon add circle ).
puny / mini / tiny / small icon	Size	Legacy semantic sizes, placed before icon : puny 0.625rem · mini 0.75rem · tiny 0.875rem · small 1rem. Default (no modifier) is 1.5rem.
icon wf-icon-*	Size	Utility scale, placed after icon . Variants: xs 0.75rem · sm 0.875rem · md 1.25rem · lg 1.5rem · xl 2rem · 2xl 2.5rem · 3xl 3rem.
{color} icon	Color	Named color, placed before icon . Variants: primary · secondary · positive · negative · alert · info · indigo · sage · plum · dark · light
{color} inverted icon	Color	Inverted (tinted surface) color. Same variants as above. Useful on colored or dark backgrounds.
icon wf-circular / wf-rounded	Shape	Adds a border and padding around the icon. wf-circular = pill radius; wf-rounded = corner radius. Add medium · large , or big to increase padding.
icon spinning	Animation	Continuous 2s clockwise rotation. Useful for loading spinners combined with icon refresh or icon gear .
flipped / vertically flipped icon	Transform	Mirror flip, placed before icon . Horizontal by default; add vertically for a vertical flip. Alias: horizontally flipped .
rotated / left rotated icon	Transform	90° rotation, placed before icon . rotated (clockwise); left rotated (counter-clockwise). Aliases: right rotated / clockwise rotated / counterclockwise rotated .
icon disabled	State	30% opacity, conveying unavailability.
icon active	State	Full opacity (overrides any inherited reduced opacity).
selectable icon	State	Pointer cursor with 80% opacity at rest, full opacity on hover. Placed before icon .