Icons that live in the text
Sixty-two stroke icons on a 24-pixel grid — 2px strokes, round caps and joins, currentColor, no fills. Copy the markup under any of them; there is no font file, no sprite, no build step.
Use
Every icon below is an inline SVG carrying class="pf-icon" — the cap-height slot from Core, so an icon always renders one cap tall and scales with the font-size around it, never a fixed pixel size. Inside a button or a link, wrap text and icon in pf-with-icon to keep them on the baseline.
<button class="pf-btn pf-btn--sm">
<svg class="pf-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 3v12"/><path d="m7 10.5 5 5 5-5"/><path d="M4 20.5h16"/>
</svg> Download
</button>Sizing is font-size
pf-icon is one cap tall, so an icon inside an h2 is bigger than the same icon in a caption. To scale one deliberately, set font-size on the icon or its parent — nothing else changes.
Colour is currentColor
The stroke is currentColor, so an icon in a pf-btn is ink on accent, in a link it is the link colour, and pf-accent text gives an accent icon. Decorative icons keep aria-hidden="true"; a meaningful one takes a <title> instead.
The set
Copy copies the whole <svg> element — paste it where it goes.