Icons — WebBlocks UI

Usage

The icon sprite is a separate file: dist/webblocks-icons.svg. Load it once per page with a small inline script, then reference any icon by ID.

1. Load the sprite

<!-- Place near the end of <body>, after webblocks-ui.js -->
<script>
  fetch('dist/webblocks-icons.svg')
    .then(function(r) { return r.text(); })
    .then(function(svg) {
      var parser = new DOMParser();
      var svgEl = parser.parseFromString(svg, 'image/svg+xml').documentElement;
      svgEl.style.cssText = 'position:absolute;width:0;height:0;overflow:hidden';
      document.body.insertBefore(svgEl, document.body.firstChild);
      if (window.WBTheme) window.WBTheme.sync();
    });
</script>

2a. SVG <use> pattern

Semantic, accessible, inherits currentColor for easy theming.

<!-- Default size (20px) -->
<svg class="wb-icon"><use href="#wb-icon-settings"></use></svg>

<!-- Size variants -->
<svg class="wb-icon wb-icon-sm"><use href="#wb-icon-settings"></use></svg>  <!-- 16px -->
<svg class="wb-icon wb-icon-lg"><use href="#wb-icon-settings"></use></svg>  <!-- 24px -->
<svg class="wb-icon wb-icon-xl"><use href="#wb-icon-settings"></use></svg>  <!-- 32px -->

<!-- With color helpers -->
<svg class="wb-icon wb-icon-accent"><use href="#wb-icon-star"></use></svg>
<svg class="wb-icon wb-icon-muted"><use href="#wb-icon-info"></use></svg>
<svg class="wb-icon wb-icon-success"><use href="#wb-icon-check"></use></svg>
<svg class="wb-icon wb-icon-danger"><use href="#wb-icon-x"></use></svg>

<!-- Wrapped in a circle background -->
<span class="wb-icon-wrap">
  <svg class="wb-icon wb-icon-accent"><use href="#wb-icon-bell"></use></svg>
</span>

2b. <i> tag pattern (opt-in)

Load dist/webblocks-icons.css for Bootstrap-style <i> support using CSS mask-image.

<link rel="stylesheet" href="dist/webblocks-icons.css">

<!-- Then use <i> tags (no sprite fetch needed) -->
<i class="wb-icon wb-icon-settings"></i>
<i class="wb-icon wb-icon-sm wb-icon-bell"></i>
<i class="wb-icon wb-icon-lg wb-icon-check wb-icon-success"></i>

Two methods, one class system. The wb-icon size and color helper classes work identically for both SVG <use> and <i> tags. The sprite-based approach is recommended for semantic usage and better accessibility.

CDN URLs

<!-- Sprite (required for <svg><use> pattern) -->
https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-icons.svg

<!-- Icon CSS (required for <i> tag pattern) -->
https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-icons.css

Size & Color Classes

Apply these classes directly to <svg class="wb-icon"> or <i class="wb-icon">.

Size modifiers

Class	Size	Use case
wb-icon-sm	16px	Inline text, badges, compact UI
(default)	20px	Buttons, nav items, most UI contexts
wb-icon-lg	24px	Headings, card icons, prominent actions
wb-icon-xl	32px	Empty states, feature highlights

Color helpers

Class	Token used	Description
wb-icon-accent	--wb-accent-text	Accent / brand color
wb-icon-muted	--wb-muted	Subdued, secondary icons
wb-icon-success	--wb-success	Positive / confirmed
wb-icon-warning	--wb-warning	Caution / attention
wb-icon-danger	--wb-danger	Destructive / error
wb-icon-info	--wb-info	Informational
(none)	currentColor	Inherits from parent text color

Icon wrap

<!-- Rounded container with accent-soft background -->
<span class="wb-icon-wrap">
  <svg class="wb-icon wb-icon-accent"><use href="#wb-icon-settings"></use></svg>
</span>

<!-- Size variants of the wrap -->
<span class="wb-icon-wrap wb-icon-wrap-sm">…</span>
<span class="wb-icon-wrap wb-icon-wrap-lg">…</span>

Icon Gallery

Click any icon to copy its snippet. Use the toggle to switch between <svg><use> and <i> formats.

152 icons