Icons

Core UI icons in outline and filled styles, drawn on a 24px grid with a 1.75px stroke. Click an icon to copy its SVG.

Usage

Paste the SVG inline. Icons use currentColor, so they take the text color of their parent. Give decorative icons aria-hidden="true"; give icon-only buttons an aria-label.

HTML

<button type="button" class="px-icon-btn" aria-label="Search">
  <svg class="px-icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
</button>

Right to left

Directional icons (arrows, chevrons, undo, send, external link) flip in RTL layouts. Add px-mirror to the icon, or use the component, which does it for you.

Full library in Figma

The Figma file has the full set of 1,637 icons across every category. Open the Figma file