Two usage paths

Icons can stay semantic or quick.

WebBlocks ships icons both as an SVG sprite and as CSS classes for <i> tags. Choose the pattern that matches the page: semantic SVG when structure matters, class-based icons when speed matters.

Examples

Both patterns stay explicit in the HTML.

Nothing here depends on an icon font or a hidden component wrapper.

<svg class="wb-icon wb-icon-sm" aria-hidden="true">
  <use href="#wb-icon-search"></use>
</svg>

<i class="wb-icon wb-icon-search wb-icon-sm" aria-hidden="true"></i>

Sample set

The icon language covers navigation, data, files, users, and system actions.

This is a small sample. The full gallery and copy patterns live in the icons example page.

home

search

book

users

settings

layout-dashboard

bar-chart

github

Next step

Use the full icon example when you need browsing and copy flow.

That page is better for searching, comparing names, and copying working markup.

Open icon reference Full gallery and copy patterns

Browse the wider set and choose between SVG use and class-based icon syntax.