Icon Reference

Usage

Two patterns are supported. Use whichever fits your workflow.

Pattern 1 — <i> tag

Requires webblocks-icons.css in addition to webblocks-ui.css.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@master/dist/webblocks-icons.css">

<i class="wb-icon wb-icon-settings"></i>
<i class="wb-icon wb-icon-settings wb-icon-lg wb-icon-accent"></i>

Pattern 2 — SVG sprite

No extra CSS needed — uses webblocks-icons.svg.

<svg class="wb-icon" aria-hidden="true">
  <use href="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@master/dist/webblocks-icons.svg#wb-icon-settings"></use>
</svg>

Sizes

Colors

Icon wrap (colored badge)

In buttons

In stat cards

In nav sidebar

All Icons

Hover to see the icon name. Click to copy the sprite usage snippet to clipboard.