Icons
Simple outlines for familiar interface actions. Each icon uses a 24-unit viewBox, rounded strokes and currentColor, so it scales with its dimensions and inherits the surrounding text color.
Navigation
-
Chevron up
SVG source
-
Chevron down
SVG source
-
Chevron left
SVG source
-
Chevron right
SVG source
-
Arrow left
SVG source
-
Arrow right
SVG source
-
Menu
SVG source
-
Close
SVG source
Actions
-
Search
SVG source
-
Plus
SVG source
-
Minus
SVG source
-
Edit
SVG source
-
Trash
SVG source
-
Download
SVG source
Feedback
-
Check
SVG source
-
Warning
SVG source
-
Information
SVG source
-
Error
SVG source
Social and engagement
-
Heart / like
SVG source
-
Comment
SVG source
-
Share
SVG source
Size and color
See Images: inline SVG icon utilities for the utility reference and optional module details.
Optional icon-16, icon-24, icon-32 and icon-48 set width and height in pixels, independent of the root font size. icon adds inline alignment and prevents flex shrinking. These utilities work with external SVG collections too; they do not change an icon's paths or stroke style.
<div class="flex flex-wrap gap-24 items-center clr-primary">
<svg class="icon icon-16" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m4 12 5 5L20 6"/></svg>
<svg class="icon icon-24" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m4 12 5 5L20 6"/></svg>
<svg class="icon icon-32" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m4 12 5 5L20 6"/></svg>
<svg class="icon icon-48" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m4 12 5 5L20 6"/></svg>
</div>Icons with labels
Use visible text where possible. Decorative SVGs use aria-hidden="true" and focusable="false". Give an icon-only button its action name with aria-label; a tooltip alone is not its label.
<div class="flex flex-wrap gap-16 items-start">
<details>
<summary class="btn btn-secondary gap-8">Browse <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg></summary>
<nav aria-label="Browse topics" class="p-16"><a href="/docs/">Documentation</a></nav>
</details>
<a class="btn btn-primary gap-8" href="/docs/installation/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 12h16m-7-7 7 7-7 7"/></svg> Read installation guide</a>
<button class="btn btn-secondary" type="button" aria-label="Search" disabled><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4 4"/></svg></button>
<a class="btn btn-secondary gap-8" href="/ui/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 6h16M4 12h16M4 18h16"/></svg> UI navigation</a>
</div>The native disclosure opens the Browse menu. The Search button demonstrates an accessible icon-only label; it is disabled because this example has no search service.
Engagement in a card
Leave room between related groups
Spacing makes the relationship between a heading, a paragraph and its supporting details easier to see.
<div class="clr-primary-bg p-24 border-r-16">
<h3 class="fs-24 mt-0 mb-16">Leave room between related groups</h3>
<p class="mb-24">Spacing makes the relationship between a heading, a paragraph and its supporting details easier to see.</p>
<div class="flex flex-wrap gap-24 items-center" aria-label="Sample engagement counts">
<span class="flex gap-8 items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 21 3.5 12.5a5.2 5.2 0 0 1 7.4-7.3L12 6.3l1.1-1.1a5.2 5.2 0 0 1 7.4 7.3L12 21Z"/></svg> 12 likes</span>
<span class="flex gap-8 items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M21 11a8.5 8.5 0 0 1-9 8H7l-5 3 1.5-6A7.6 7.6 0 0 1 3 11a9 9 0 0 1 18 0Z"/></svg> 3 comments</span>
</div>
</div>Use in HTML or Nunjucks
Copy an SVG and paste the markup directly into an HTML page or a Nunjucks include. Keep its xmlns, viewBox, paths and paint attributes. Set the surrounding text color, or add a color utility to the SVG. An external image loaded with img does not inherit the page's currentColor.
The CSS utilities live in the optional images module (src/_images.scss in the package), also included by the full library entry point. Import that partial alone for sizing without any icon assets. The gallery geometry lives only in workshop data at src/_data/icons.js; no collection or runtime dependency ships with the CSS package.
These original geometric outlines were created for this workshop and use the site repository's MIT license. No third-party SVG collection was imported. When using another library, keep its required attribution and license notices.