Skip to content
UI Kit
Accent color

Icons

The kit’s own line icons in 18 groups, drawn on a 24 pixel grid.

One of 5 components in Data display

3 variants

Variants

Sizes and weights

From 16 to 32 pixels, three stroke weights and the icons inside buttons, fields and lists.

Containers

Six calm ways to set an icon above a feature, all from tokens.

Details

What Icons brings along, read from the registry and the source.

Category
Data display
Variants
3
Version
1.0.1 · since 1.0.0
File
components/ui/icon.tsx
Brings along
utils
npm packages
None
Languages
Texts come through props
Studio
Adjust in code

Props

The IconProps interface from components/ui/icon.tsx, with the comments from the code. Also takes every prop of Omit<React.SVGProps<SVGSVGElement>, 'name'>.

  • namerequired
    IconName
  • sizeoptional
    number
  • labeloptional
    string

    Label for screen readers. Without it the icon is decorative and hidden.

Accessibility

Read from the source of the component.

  • Sets aria-label, so screen readers announce purpose and state.
  • Uses the role label.
  • Needs no client state. The server writes it in full, so it reads without JavaScript too.

Motion

  • No animations, it stands still from the start.

Source

The file aiw add puts into your project. From then on it is yours.

Show the file, 400 lines
components/ui/icon.tsx
'use client';

import { cn } from '@/lib/kit';

/*
 * UI Master Kit icons. Drawn for this kit on a 24 px grid, 1.6 px stroke,
 * round caps. Built from plain geometry, no third-party icon set.
 * Add new ones in the same style: 2 px safe area, optical center, no fills.
 * Search for the name first: a name defined twice breaks the type check.
 * The full set with groups is shown in the icons demo (src/demos/blocks/icon.tsx).
 */
export const ICONS = {
  // Arrows and chevrons
  'arrow-right': '<path d="M4 12h15M13 6l6 6-6 6"/>',
  'arrow-left': '<path d="M20 12H5M11 6l-6 6 6 6"/>',
  'arrow-up': '<path d="M12 20V5M6 11l6-6 6 6"/>',
  'arrow-down': '<path d="M12 4v15M6 13l6 6 6-6"/>',
  'arrow-up-right': '<path d="M7 17 17 7M8 7h9v9"/>',
  'chevron-right': '<path d="m9 6 6 6-6 6"/>',
  'chevron-left': '<path d="m15 6-6 6 6 6"/>',
  'chevron-down': '<path d="m6 9 6 6 6-6"/>',
  'chevron-up': '<path d="m6 15 6-6 6 6"/>',
  'chevrons-up-down': '<path d="m8 9 4-4 4 4M8 15l4 4 4-4"/>',

  // Actions
  check: '<path d="m5 12.5 4.5 4.5L19 7.5"/>',
  'check-circle': '<circle cx="12" cy="12" r="9"/><path d="m8 12.3 2.8 2.7L16 9.6"/>',
  plus: '<path d="M12 5v14M5 12h14"/>',
  minus: '<path d="M5 12h14"/>',
  x: '<path d="M6 6l12 12M18 6 6 18"/>',
  menu: '<path d="M4 7h16M4 12h16M4 17h16"/>',
  search: '<circle cx="11" cy="11" r="6.5"/><path d="m16 16 4 4"/>',
  'more-horizontal': '<circle cx="5.5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="18.5" cy="12" r="1.2"/>',
  copy: '<rect x="8.5" y="8.5" width="11" height="11" rx="2.5"/><path d="M15.5 8.5V6.5a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2"/>',
  download: '<path d="M12 4v11M7 10.5l5 5 5-5M5 19.5h14"/>',
  upload: '<path d="M12 16V5M7 9.5l5-5 5 5M5 19.5h14"/>',
  external: '<path d="M13 5h6v6M19 5l-8 8M17 14v4a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 5 18V8.5A1.5 1.5 0 0 1 6.5 7H10"/>',
  link: '<path d="M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1 1M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 0 0 5.66 5.66l1-1"/>',
  edit: '<path d="M15 5.5 18.5 9M5 19l1-4L16.2 4.8a1.6 1.6 0 0 1 2.3 0l.7.7a1.6 1.6 0 0 1 0 2.3L9 18z"/>',
  trash: '<path d="M4.5 7h15M10 4h4M7 7l.8 11.2A1.9 1.9 0 0 0 9.7 20h4.6a1.9 1.9 0 0 0 1.9-1.8L17 7M10 11v5M14 11v5"/>',
  refresh: '<path d="M19 12a7 7 0 1 1-2.05-4.95M19 4.5V8h-3.5"/>',
  filter: '<path d="M4 6h16M7 12h10M10 18h4"/>',
  sliders: '<path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/>',
  'log-out': '<path d="M14 5H6.5A1.5 1.5 0 0 0 5 6.5v11A1.5 1.5 0 0 0 6.5 19H14M10 12h10M16.5 8.5 20 12l-3.5 3.5"/>',
  send: '<path d="M4.5 12 19.5 5l-4 14-3.5-5.5zM12 13.5 19.5 5"/>',

  // Objects
  mail: '<rect x="3.5" y="5.5" width="17" height="13" rx="2.5"/><path d="m4.5 7.5 7.5 5.5 7.5-5.5"/>',
  phone: '<rect x="7" y="3" width="10" height="18" rx="2.5"/><path d="M11 17.5h2"/>',
  'map-pin': '<path d="M12 21c4-4.4 6.5-7.9 6.5-11.2a6.5 6.5 0 0 0-13 0C5.5 13.1 8 16.6 12 21Z"/><circle cx="12" cy="10" r="2.4"/>',
  calendar: '<rect x="4" y="5.5" width="16" height="14.5" rx="2.5"/><path d="M4 10h16M8.5 3.5v4M15.5 3.5v4"/>',
  clock: '<circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/>',
  globe: '<circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.4 2.4 3.5 5.2 3.5 8.5s-1.1 6.1-3.5 8.5c-2.4-2.4-3.5-5.2-3.5-8.5s1.1-6.1 3.5-8.5Z"/>',
  home: '<path d="M4.5 10.5 12 4.5l7.5 6V19a1 1 0 0 1-1 1h-4v-5.5h-5V20h-4a1 1 0 0 1-1-1z"/>',
  user: '<circle cx="12" cy="8.5" r="3.5"/><path d="M5 19.5c1-3.3 3.7-5 7-5s6 1.7 7 5"/>',
  users: '<circle cx="9" cy="8.5" r="3.2"/><path d="M3 19c.9-3 3.2-4.6 6-4.6s5.1 1.6 6 4.6M15.5 5.6a3.2 3.2 0 0 1 0 5.8M17 14.7c2 .5 3.4 2 4 4.3"/>',
  chat: '<path d="M5 18.5V7a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 19 7v6.5a2.5 2.5 0 0 1-2.5 2.5H8.5z"/><path d="M9 9.5h6M9 12.5h3.5"/>',
  bell: '<path d="M6.5 16.5V11a5.5 5.5 0 0 1 11 0v5.5l1.5 1.5H5zM10 20.5h4"/>',
  lock: '<rect x="5" y="10.5" width="14" height="10" rx="2.5"/><path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5"/>',
  key: '<circle cx="8.5" cy="15.5" r="4"/><path d="m11.5 12.5 8-8M16.5 7.5l2 2"/>',
  eye: '<path d="M2.8 12C4.7 7.9 8 5.5 12 5.5s7.3 2.4 9.2 6.5c-1.9 4.1-5.2 6.5-9.2 6.5s-7.3-2.4-9.2-6.5Z"/><circle cx="12" cy="12" r="3"/>',
  'eye-off': '<path d="M4 4l16 16M9.9 6A8.6 8.6 0 0 1 12 5.5c4 0 7.3 2.4 9.2 6.5a12 12 0 0 1-2.6 3.6M6.2 7.8A12 12 0 0 0 2.8 12c1.9 4.1 5.2 6.5 9.2 6.5 1.4 0 2.7-.3 3.9-.9M10 10.2a3 3 0 0 0 3.9 3.9"/>',
  settings: '<circle cx="12" cy="12" r="3"/><path d="M12 3.5v2.2M12 18.3v2.2M20.5 12h-2.2M5.7 12H3.5M18 6l-1.6 1.6M7.6 16.4 6 18M18 18l-1.6-1.6M7.6 7.6 6 6"/>',
  file: '<path d="M6.5 3.5h7l4 4V19a1.5 1.5 0 0 1-1.5 1.5H6.5A1.5 1.5 0 0 1 5 19V5a1.5 1.5 0 0 1 1.5-1.5Z"/><path d="M13.5 3.5V8h4M8.5 12.5h7M8.5 16h5"/>',
  folder: '<path d="M3.5 7A1.5 1.5 0 0 1 5 5.5h4.3l2 2.2H19A1.5 1.5 0 0 1 20.5 9.2V17.5A1.5 1.5 0 0 1 19 19H5a1.5 1.5 0 0 1-1.5-1.5Z"/>',
  image: '<rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><circle cx="9" cy="10" r="1.7"/><path d="m4.5 17.5 5-4.5 3.5 3 2.5-2 4 3.5"/>',
  video: '<rect x="3.5" y="6" width="12.5" height="12" rx="2.5"/><path d="m16 10.5 4.5-2.5v8L16 13.5"/>',
  play: '<path d="M8 5.8v12.4a.8.8 0 0 0 1.2.7l9.9-6.2a.8.8 0 0 0 0-1.4L9.2 5.1a.8.8 0 0 0-1.2.7Z"/>',
  pause: '<path d="M9 5.5v13M15 5.5v13"/>',
  code: '<path d="m9 7.5-4.5 4.5L9 16.5M15 7.5l4.5 4.5-4.5 4.5"/>',
  terminal: '<rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><path d="m7.5 9.5 3 2.5-3 2.5M12.5 15h4"/>',
  layers: '<path d="m12 4 8.5 4.5L12 13 3.5 8.5Z"/><path d="m3.5 12.5 8.5 4.5 8.5-4.5M3.5 16.5 12 21l8.5-4.5"/>',
  grid: '<rect x="4" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="4" y="13.5" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1.5"/>',
  cart: '<path d="M3.5 4.5h2.2l2.2 10.2a1.5 1.5 0 0 0 1.5 1.2h7.8a1.5 1.5 0 0 0 1.5-1.1l1.6-6.3H6.7"/><circle cx="10" cy="19.5" r="1.2"/><circle cx="17" cy="19.5" r="1.2"/>',
  bag: '<path d="M5.5 8.5h13l-1 11a1.5 1.5 0 0 1-1.5 1.4H8a1.5 1.5 0 0 1-1.5-1.4Z"/><path d="M9 10V7a3 3 0 0 1 6 0v3"/>',
  'credit-card': '<rect x="3.5" y="5.5" width="17" height="13" rx="2.5"/><path d="M3.5 10h17M7 15h3"/>',
  quote: '<path d="M10 7.5H6.5A1.5 1.5 0 0 0 5 9v3.5h5V9.5M19 7.5h-3.5A1.5 1.5 0 0 0 14 9v3.5h5V9.5M10 12.5c0 2.6-1.4 4.2-4 4.5M19 12.5c0 2.6-1.4 4.2-4 4.5"/>',
  info: '<circle cx="12" cy="12" r="8.5"/><path d="M12 11v5.5M12 7.8v.2"/>',
  alert: '<path d="M10.7 4.6 3.4 17.3A1.5 1.5 0 0 0 4.7 19.5h14.6a1.5 1.5 0 0 0 1.3-2.2L13.3 4.6a1.5 1.5 0 0 0-2.6 0Z"/><path d="M12 9.5v4.5M12 16.7v.2"/>',

  // Ideas and qualities
  sparkle: '<path d="M12 3.5c.6 4.4 2.6 6.4 7 7-4.4.6-6.4 2.6-7 7-.6-4.4-2.6-6.4-7-7 4.4-.6 6.4-2.6 7-7Z"/><path d="M18.5 16.5c.2 1.4.8 2 2 2.2-1.2.2-1.8.8-2 2.2-.2-1.4-.8-2-2-2.2 1.2-.2 1.8-.8 2-2.2Z"/>',
  star: '<path d="m12 4 2.47 5.01 5.53.8-4 3.9.94 5.5L12 16.6l-4.94 2.6.94-5.5-4-3.9 5.53-.8Z"/>',
  heart: '<path d="M12 19.5s-7.5-4.4-7.5-10A4.3 4.3 0 0 1 12 7a4.3 4.3 0 0 1 7.5 2.5c0 5.6-7.5 10-7.5 10Z"/>',
  bolt: '<path d="M13 3.5 5.5 13.5H12l-1 7 7.5-10H12Z"/>',
  shield: '<path d="M12 3.5 19 6v5.5c0 4.4-2.9 7.6-7 9-4.1-1.4-7-4.6-7-9V6Z"/><path d="m9 12 2.2 2.2L15.5 10"/>',
  target: '<circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5"/>',
  'trending-up': '<path d="m3.5 17 6-6 4 4 7-7.5M15 7.5h5.5V13"/>',
  'bar-chart': '<path d="M4 20h16M7 16.5v-5M12 16.5V6M17 16.5V10"/>',
  rocket: '<path d="M14.5 4.5c2.6-.6 4.4-.5 5 0 .5.6.6 2.4 0 5-.8 3.4-3.6 6.5-7 8.5l-5.5-5.5c2-3.4 5.1-6.2 8.5-7Z"/><circle cx="14.5" cy="9.5" r="1.6"/><path d="M7 12.5 4 13l3.5-4.5M11.5 17l-.5 3 4.5-3.5M6.5 17.5l-2 2"/>',
  cube: '<path d="m12 3.5 7.5 4.25v8.5L12 20.5l-7.5-4.25v-8.5Z"/><path d="m4.5 7.75 7.5 4.25 7.5-4.25M12 12v8.5"/>',
  palette: '<path d="M12 3.5a8.5 8.5 0 0 0 0 17c1.1 0 1.6-.7 1.6-1.5 0-1.2-1-1.6-1-2.6s.8-1.6 1.9-1.6h2.1a3.9 3.9 0 0 0 3.9-3.9c0-4.2-3.8-7.4-8.5-7.4Z"/><circle cx="8" cy="11" r="1"/><circle cx="11" cy="7.5" r="1"/><circle cx="15.5" cy="8.5" r="1"/>',
  gift: '<rect x="4" y="9" width="16" height="4" rx="1"/><path d="M5.5 13v6a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-6M12 9v11M12 9c-1.5-3.5-5-4-5-1.5C7 9 9 9 12 9Zm0 0c1.5-3.5 5-4 5-1.5C17 9 15 9 12 9Z"/>',
  truck: '<path d="M3.5 6.5h10v10h-10zM13.5 10h4l3 3.5v3h-7"/><circle cx="7" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/>',
  package: '<path d="m12 3.5 8 4.2v8.6L12 20.5l-8-4.2V7.7Z"/><path d="m4 7.7 8 4.3 8-4.3M12 12v8.5M8 5.6l8 4.3"/>',

  // Theme and interface
  sun: '<circle cx="12" cy="12" r="3.6"/><path d="M12 3.5v1.8M12 18.7v1.8M20.5 12h-1.8M5.3 12H3.5M18 6l-1.3 1.3M7.3 16.7 6 18M18 18l-1.3-1.3M7.3 7.3 6 6"/>',
  moon: '<path d="M19.5 14.5A7.5 7.5 0 0 1 9.5 4.5a7.5 7.5 0 1 0 10 10Z"/>',
  monitor: '<rect x="3.5" y="4.5" width="17" height="11.5" rx="2"/><path d="M9 20h6M12 16v4"/>',
  tablet: '<rect x="5.5" y="3" width="13" height="18" rx="2.5"/><path d="M11 17.5h2"/>',
  languages: '<path d="M4 6h8M8 4.5V6c0 3.6-1.8 6.4-4 7.5M5.8 9.5c1 1.8 2.6 3.2 4.7 4M12.5 20l3.5-8.5 3.5 8.5M13.7 17.3h4.6"/>',
  'panel-left': '<rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><path d="M9.5 4.5v15"/>',
  inbox: '<path d="M4 13.5 6.3 6a1.5 1.5 0 0 1 1.4-1h8.6a1.5 1.5 0 0 1 1.4 1L20 13.5V18a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18Z"/><path d="M4 13.5h4.5l1 2h5l1-2H20"/>',
  'loader': '<path d="M12 3.5a8.5 8.5 0 1 0 8.5 8.5"/>',

  // App screens (navbar, auth, dashboard, chat, calendar)
  fingerprint: '<path d="M8.5 5.2A7.5 7.5 0 0 1 19.5 12v1.5M4.5 15.5V12a7.4 7.4 0 0 1 1.6-4.6M12 8a4 4 0 0 1 4 4v2.5c0 2-.5 3.9-1.4 5.5M8 12a4 4 0 0 1 1.2-2.8M8 15c0 2-.7 3.6-1.8 4.8M12 12v3.2c0 2.3-.8 4.4-2.1 5.8"/>',
  mic: '<rect x="9" y="3.5" width="6" height="11" rx="3"/><path d="M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v2.5"/>',
  paperclip: '<path d="m19 11.5-7.1 7.1a4.5 4.5 0 0 1-6.4-6.4l7.4-7.4a3 3 0 0 1 4.2 4.2l-7.3 7.3a1.5 1.5 0 0 1-2.1-2.1l6.6-6.6"/>',
  stop: '<rect x="6.5" y="6.5" width="11" height="11" rx="2"/>',
  'thumbs-up': '<path d="M7.5 10.5v9h-3v-9zM7.5 10.5 11 4a2 2 0 0 1 2.5 2.3l-.6 3.2h5a1.8 1.8 0 0 1 1.8 2.1l-1.2 6.4a1.8 1.8 0 0 1-1.8 1.5H7.5"/>',
  'thumbs-down': '<path d="M7.5 13.5v-9h-3v9zM7.5 13.5 11 20a2 2 0 0 0 2.5-2.3l-.6-3.2h5a1.8 1.8 0 0 0 1.8-2.1l-1.2-6.4a1.8 1.8 0 0 0-1.8-1.5H7.5"/>',
  command: '<path d="M9 9V6.5A2.5 2.5 0 1 0 6.5 9H9Zm0 0h6m-6 0v6m6-6V6.5A2.5 2.5 0 1 1 17.5 9H15Zm0 0v6m0 0H9m6 0v2.5a2.5 2.5 0 1 0 2.5-2.5H15Zm-6 0v2.5A2.5 2.5 0 1 1 6.5 15H9Z"/>',
  'help-circle': '<circle cx="12" cy="12" r="8.5"/><path d="M9.6 9.5a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.2-2.4 3.6M12 16.8v.2"/>',
  'chevrons-left': '<path d="m12 6-6 6 6 6M18 6l-6 6 6 6"/>',
  'chevrons-right': '<path d="m6 6 6 6-6 6M12 6l6 6-6 6"/>',
  activity: '<path d="M3.5 12h4l2.5-6 4 12 2.5-6h4"/>',
  wallet: '<path d="M19 8.5v-2A1.5 1.5 0 0 0 17.5 5h-12A1.5 1.5 0 0 0 4 6.5v11A1.5 1.5 0 0 0 5.5 19h13a1.5 1.5 0 0 0 1.5-1.5V10a1.5 1.5 0 0 0-1.5-1.5H4"/><circle cx="16" cy="13.75" r="1"/>',
  kanban: '<rect x="4" y="4" width="4.5" height="13" rx="1.5"/><rect x="9.75" y="4" width="4.5" height="9" rx="1.5"/><rect x="15.5" y="4" width="4.5" height="16" rx="1.5"/>',
  'pie-chart': '<path d="M12 3.5V12h8.5A8.5 8.5 0 0 0 12 3.5Z"/><path d="M19.2 15.5A8.5 8.5 0 1 1 8.5 4.3"/>',
  receipt: '<path d="M6 3.5h12v17l-2.5-1.5-2 1.5-1.5-1.2-1.5 1.2-2-1.5L6 20.5Z"/><path d="M9 8h6M9 11.5h6M9 15h3.5"/>',
  'arrow-down-right': '<path d="M7 7l10 10M17 8v9H8"/>',
  'trending-down': '<path d="m3.5 7 6 6 4-4 7 7.5M15 16.5h5.5V11"/>',
  circle: '<circle cx="12" cy="12" r="8.5"/>',
  hash: '<path d="M9.5 4 8 20M16 4l-1.5 16M4.5 9H20M4 15h15.5"/>',
  book: '<path d="M5 19V5.5A1.5 1.5 0 0 1 6.5 4H19v13.5H6.5A1.5 1.5 0 0 0 5 19Zm0 0a1.5 1.5 0 0 0 1.5 1.5H19v-3"/>',
  'user-plus': '<circle cx="10" cy="8.5" r="3.5"/><path d="M3.5 19.5c1-3.3 3.5-5 6.5-5 1.6 0 3 .5 4.2 1.4M18 13v6M15 16h6"/>',
  'at-sign': '<circle cx="12" cy="12" r="3.5"/><path d="M15.5 12v1.3a2.4 2.4 0 0 0 4.8 0V12a8.5 8.5 0 1 0-3.3 6.7"/>',
  archive: '<rect x="3.5" y="4.5" width="17" height="4" rx="1"/><path d="M5 8.5v10A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5v-10M10 12.5h4"/>',
  pin: '<path d="M9 4h6M10 4v5.5L7 13h10l-3-3.5V4M12 13v7.5"/>',
  database: '<ellipse cx="12" cy="6" rx="7" ry="2.5"/><path d="M5 6v12c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5V6M5 12c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5"/>',
  volume: '<path d="M4.5 9.5h3l4.5-4v13l-4.5-4h-3z"/><path d="M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11"/>',
  grip: '<path d="M9 6.5h.01M15 6.5h.01M9 12h.01M15 12h.01M9 17.5h.01M15 17.5h.01"/>',
  'mail-open': '<path d="M3.5 10 12 4.5l8.5 5.5V18a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 18Z"/><path d="m3.5 10 8.5 5.5 8.5-5.5"/>',
  'log-in': '<path d="M10 5h7.5A1.5 1.5 0 0 1 19 6.5v11a1.5 1.5 0 0 1-1.5 1.5H10M4 12h10M10.5 8.5 14 12l-3.5 3.5"/>',
  'calendar-check': '<rect x="4" y="5.5" width="16" height="14.5" rx="2.5"/><path d="M4 10h16M8.5 3.5v4M15.5 3.5v4M9 14.8l2 2 4-4"/>',
  // Elements (buttons, forms, overlays, navigation)
  'alert-circle': '<circle cx="12" cy="12" r="8.5"/><path d="M12 7.8v5M12 16v.2"/>',
  'bold': '<path d="M7.5 5h5.25a3.5 3.5 0 0 1 0 7H7.5zM7.5 12h6a3.5 3.5 0 0 1 0 7h-6z"/>',
  'italic': '<path d="M10.5 5H17M7 19h6.5M14 5l-4 14"/>',
  'underline': '<path d="M7.5 4.5V11a4.5 4.5 0 0 0 9 0V4.5M6 19.5h12"/>',
  'align-left': '<path d="M4 6h16M4 10h10M4 14h16M4 18h10"/>',
  'align-center': '<path d="M4 6h16M7 10h10M4 14h16M7 18h10"/>',
  'align-right': '<path d="M4 6h16M10 10h10M4 14h16M10 18h10"/>',
  'corner-down-left': '<path d="M19 5v6.5a2.5 2.5 0 0 1-2.5 2.5H5M9 10l-4 4 4 4"/>',
  'more-vertical': '<circle cx="12" cy="5.5" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="12" cy="18.5" r="1.2"/>',
  'cloud-upload': '<path d="M7.5 18.5a4.5 4.5 0 0 1-.9-8.9 5.8 5.8 0 0 1 11.2-.3 4.3 4.3 0 0 1-.3 8.7M12 12.5v8M9 15.5l3-3 3 3"/>',
  'printer': '<path d="M7 8.5v-4h10v4M7 17H5.5A1.5 1.5 0 0 1 4 15.5V10a1.5 1.5 0 0 1 1.5-1.5h13A1.5 1.5 0 0 1 20 10v5.5a1.5 1.5 0 0 1-1.5 1.5H17M7 14h10v6H7z"/>',
  // Content blocks (blog, gallery, team, about, contact, error pages)
  'wifi-off': '<path d="M3.5 9.3a12.5 12.5 0 0 1 17 0M6.3 12.8a8.2 8.2 0 0 1 11.4 0M9.2 16.2a4 4 0 0 1 5.6 0M12 19.5v.1M4.5 4.5l15 15"/>',
  wrench: '<path d="M14.8 4.2a4.6 4.6 0 0 0-5.3 6L4.2 15.5a2.2 2.2 0 0 0 3.1 3.1l5.3-5.3a4.6 4.6 0 0 0 6-5.3l-2.8 2.8-2.6-.5-.5-2.6Z"/>',
  'book-open': '<path d="M12 6.8C10.2 5.5 7.7 4.8 4.5 4.8v12.9c3.2 0 5.7.7 7.5 2 1.8-1.3 4.3-2 7.5-2V4.8c-3.2 0-5.7.7-7.5 2ZM12 6.8v12.9"/>',
  bookmark: '<path d="M7 4.5h10a1 1 0 0 1 1 1v14.2l-6-4-6 4V5.5a1 1 0 0 1 1-1Z"/>',
  share: '<circle cx="17.5" cy="6" r="2.5"/><circle cx="6.5" cy="12" r="2.5"/><circle cx="17.5" cy="18" r="2.5"/><path d="m8.7 10.8 6.6-3.6M8.7 13.2l6.6 3.6"/>',
  expand: '<path d="M14.5 4.5h5v5M9.5 19.5h-5v-5M19.5 4.5 14 10M4.5 19.5 10 14"/>',
  building: '<path d="M5 20.5V5a1.5 1.5 0 0 1 1.5-1.5h7A1.5 1.5 0 0 1 15 5v15.5M15 9.5h3a1.5 1.5 0 0 1 1.5 1.5v9.5M3.5 20.5h17M8.5 7.5h3M8.5 11h3M8.5 14.5h3"/>',
  briefcase: '<rect x="3.5" y="7" width="17" height="12.5" rx="2.5"/><path d="M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7M3.5 12.5h17"/>',
  headset: '<path d="M4.5 14v-2a7.5 7.5 0 0 1 15 0v2"/><rect x="4" y="13" width="4" height="6" rx="1.5"/><rect x="16" y="13" width="4" height="6" rx="1.5"/><path d="M18 19c0 1.2-1.3 2-3.5 2H13"/>',
  list: '<path d="M9 6.5h11M9 12h11M9 17.5h11M4.5 6.5h.1M4.5 12h.1M4.5 17.5h.1"/>',
  flag: '<path d="M5.5 20.5v-16M5.5 4.5h11l-2 4 2 4h-11"/>',
  'x-circle': '<circle cx="12" cy="12" r="8.5"/><path d="m9.2 9.2 5.6 5.6M14.8 9.2l-5.6 5.6"/>',
  server: '<rect x="4" y="4.5" width="16" height="6.5" rx="2"/><rect x="4" y="13" width="16" height="6.5" rx="2"/><path d="M7.5 7.75h.1M7.5 16.25h.1M11 7.75h5.5M11 16.25h5.5"/>',
  plug: '<path d="M9 3.5V8M15 3.5V8M6.5 8h11v3a5.5 5.5 0 0 1-11 0ZM12 16.5v4"/>',
  leaf: '<path d="M5 19c0-8 5-13.5 14.5-14 .3 9.5-5.5 14.5-13 14Z"/><path d="M5 19c3-4 6-6.5 9.5-8.5"/>',
  compass: '<circle cx="12" cy="12" r="8.5"/><path d="m15.5 8.5-2 5-5 2 2-5Z"/>',

  // Marketing B (pricing, testimonials, cta, faq, newsletter, banners, popups)
  repeat: '<path d="M17 3.5 20 6.5l-3 3M4 11.5v-1a4 4 0 0 1 4-4h12M7 20.5l-3-3 3-3M20 12.5v1a4 4 0 0 1-4 4H4"/>',
  cookie: '<path d="M20.4 12.6a8.5 8.5 0 1 1-9-9 3 3 0 0 0 3.6 3.6 3 3 0 0 0 5.4 5.4Z"/><path d="M8.5 9.5h.01M8 14.5h.01M12.5 16.5h.01M12 12h.01M16 15.5h.01"/>',
  tag: '<path d="M3.5 12.1V5A1.5 1.5 0 0 1 5 3.5h7.1a1.5 1.5 0 0 1 1.06.44l7.2 7.2a1.5 1.5 0 0 1 0 2.12l-7.1 7.1a1.5 1.5 0 0 1-2.12 0l-7.2-7.2a1.5 1.5 0 0 1-.44-1.06Z"/><circle cx="8.5" cy="8.5" r="1.5"/>',
  megaphone: '<path d="M4 10v4a1.5 1.5 0 0 0 1.5 1.5H8l7.5 4V4.5L8 8.5H5.5A1.5 1.5 0 0 0 4 10ZM8 15.5l1.2 4.5M18.5 9.5a3 3 0 0 1 0 5"/>',
  percent: '<path d="M18.5 5.5l-13 13"/><circle cx="7.5" cy="7.5" r="2.5"/><circle cx="16.5" cy="16.5" r="2.5"/>',
  'qr-code': '<rect x="4" y="4" width="6" height="6" rx="1.2"/><rect x="14" y="4" width="6" height="6" rx="1.2"/><rect x="4" y="14" width="6" height="6" rx="1.2"/><path d="M14 14h2.5v2.5M20 14v.01M14 20h.01M17.5 20H20v-3"/>',

  // More arrows
  'arrow-down-left': '<path d="M17 7 7 17M16 17H7V8"/>',
  'arrow-up-left': '<path d="M17 17 7 7M7 16V7h9"/>',
  'arrow-right-circle': '<circle cx="12" cy="12" r="8.5"/><path d="M8 12h7.5M12.5 8.5 16 12l-3.5 3.5"/>',
  'arrows-left-right': '<path d="M4 8.5h15M15.5 5l3.5 3.5-3.5 3.5M20 15.5H5M8.5 12 5 15.5 8.5 19"/>',
  'arrows-up-down': '<path d="M8.5 19.5v-15M5 8l3.5-3.5L12 8M15.5 4.5v15M12 16l3.5 3.5L19 16"/>',
  undo: '<path d="M9 13.5 4.5 9 9 4.5M4.5 9H15a5 5 0 0 1 0 10h-3.5"/>',
  redo: '<path d="M15 13.5 19.5 9 15 4.5M19.5 9H9a5 5 0 0 0 0 10h3.5"/>',
  'rotate-ccw': '<path d="M4.5 12a7.5 7.5 0 1 0 2.2-5.3M4.5 4.5V9H9"/>',
  maximize: '<path d="M14.5 4.5h5v5M9.5 19.5h-5v-5M19.5 4.5l-6 6M4.5 19.5l6-6"/>',
  minimize: '<path d="m19.5 4.5-5.5 5.5M14 5.5V10h4.5M4.5 19.5l5.5-5.5M10 18.5V14H5.5"/>',
  move: '<path d="M12 3.5v17M3.5 12h17M9.5 6 12 3.5 14.5 6M9.5 18l2.5 2.5 2.5-2.5M6 9.5 3.5 12 6 14.5M18 9.5l2.5 2.5-2.5 2.5"/>',
  route: '<circle cx="6" cy="18" r="2"/><circle cx="18" cy="6" r="2"/><path d="M8 18h7.5a3 3 0 0 0 0-6h-7a3 3 0 0 1 0-6H16"/>',

  // More actions
  'plus-circle': '<circle cx="12" cy="12" r="8.5"/><path d="M12 8.5v7M8.5 12h7"/>',
  'minus-circle': '<circle cx="12" cy="12" r="8.5"/><path d="M8.5 12h7"/>',
  'check-square': '<rect x="4" y="4" width="16" height="16" rx="3"/><path d="m8.2 12.3 2.6 2.6 5-5.4"/>',
  'share-out': '<path d="M12 15V3.5M8 7.5l4-4 4 4M8 10.5H6.5A1.5 1.5 0 0 0 5 12v7a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 19 19v-7a1.5 1.5 0 0 0-1.5-1.5H16"/>',
  'zoom-in': '<circle cx="11" cy="11" r="6.5"/><path d="m16 16 4 4M11 8.5v5M8.5 11h5"/>',
  'zoom-out': '<circle cx="11" cy="11" r="6.5"/><path d="m16 16 4 4M8.5 11h5"/>',
  power: '<path d="M12 4.3v7.5M7.2 7.3a7 7 0 1 0 9.6 0"/>',
  unlock: '<rect x="5" y="10.5" width="14" height="10" rx="2.5"/><path d="M8.5 10.5V8a3.5 3.5 0 0 1 6.8-1.2"/>',
  reply: '<path d="M9.5 6.5 4.5 11l5 4.5M4.5 11H13a6 6 0 0 1 6 6v1.5"/>',
  'list-checks': '<path d="M12 7h8M12 12h8M12 17h8M4 7l1.5 1.5L8.5 5.5M4 16l1.5 1.5 3-3"/>',
  type: '<path d="M5 7.5V5h14v2.5M12 5v14M9.5 19h5"/>',
  layout: '<rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><path d="M3.5 9.5h17M10 9.5v10"/>',
  columns: '<rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><path d="M12 4.5v15"/>',
  'panel-right': '<rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><path d="M14.5 4.5v15"/>',
  table: '<rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><path d="M3.5 9.5h17M3.5 14.5h17M9.5 9.5v10"/>',
  toggle: '<rect x="2.5" y="7" width="19" height="10" rx="5"/><circle cx="16.5" cy="12" r="2.5"/>',
  history: '<path d="M4.5 12a7.5 7.5 0 1 0 2.2-5.3M4.5 4.5V9H9M12 8.5V12l2.8 1.8"/>',
  hourglass: '<path d="M6.5 3.5h11M6.5 20.5h11M7.5 3.5c0 4 4.5 5.3 4.5 8.5s-4.5 4.5-4.5 8.5M16.5 3.5c0 4-4.5 5.3-4.5 8.5s4.5 4.5 4.5 8.5"/>',
  timer: '<circle cx="12" cy="13" r="7.5"/><path d="M12 13V9.5M9.5 3h5M18.3 6.7l1.2-1.2"/>',

  // Files
  'file-plus': '<path d="M6.5 3.5h7l4 4V19a1.5 1.5 0 0 1-1.5 1.5H6.5A1.5 1.5 0 0 1 5 19V5a1.5 1.5 0 0 1 1.5-1.5Z"/><path d="M13.5 3.5V8h4M11.25 11.5v5M8.75 14h5"/>',
  'file-check': '<path d="M6.5 3.5h7l4 4V19a1.5 1.5 0 0 1-1.5 1.5H6.5A1.5 1.5 0 0 1 5 19V5a1.5 1.5 0 0 1 1.5-1.5Z"/><path d="M13.5 3.5V8h4M8.6 14.2l1.9 1.9 3.6-3.8"/>',
  'file-code': '<path d="M6.5 3.5h7l4 4V19a1.5 1.5 0 0 1-1.5 1.5H6.5A1.5 1.5 0 0 1 5 19V5a1.5 1.5 0 0 1 1.5-1.5Z"/><path d="M13.5 3.5V8h4M9.7 12 7.9 14l1.8 2M12.8 12l1.8 2-1.8 2"/>',
  files: '<path d="M8.5 3.5h6L18 7v8a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 7 15V5a1.5 1.5 0 0 1 1.5-1.5Z"/><path d="M14.5 3.5V7H18M7 7.5h-.5A1.5 1.5 0 0 0 5 9v10a1.5 1.5 0 0 0 1.5 1.5h7A1.5 1.5 0 0 0 15 19v-2.5"/>',
  'folder-open': '<path d="M3.5 17.5V7A1.5 1.5 0 0 1 5 5.5h4.3l2 2.2H17a1.5 1.5 0 0 1 1.5 1.5v1.3"/><path d="M3.5 17.5 6 11.6a1.5 1.5 0 0 1 1.4-1.1H20a1 1 0 0 1 .9 1.4L18.4 18a1.5 1.5 0 0 1-1.4 1H5a1.5 1.5 0 0 1-1.5-1.5Z"/>',
  'folder-plus': '<path d="M3.5 7A1.5 1.5 0 0 1 5 5.5h4.3l2 2.2H19a1.5 1.5 0 0 1 1.5 1.5v8.3A1.5 1.5 0 0 1 19 19H5a1.5 1.5 0 0 1-1.5-1.5Z"/><path d="M12 10.6v5.5M9.25 13.35h5.5"/>',
  clipboard: '<rect x="5.5" y="5" width="13" height="16" rx="2"/><rect x="9" y="3" width="6" height="4" rx="1"/><path d="M9 12h6M9 15.5h4"/>',
  'hard-drive': '<rect x="3.5" y="13" width="17" height="6.5" rx="2"/><path d="M3.5 15 6.6 6a1.5 1.5 0 0 1 1.4-1h8a1.5 1.5 0 0 1 1.4 1l3.1 9M7.5 16.25h.01M10.5 16.25h.01"/>',
  cloud: '<path d="M7.2 18h9a4 4 0 0 0 .4-8 5 5 0 0 0-9.7 1.1A3.5 3.5 0 0 0 7.2 18Z"/>',

  // Communication
  'message-circle': '<path d="M20 11.5a8 8 0 0 1-11.8 7L4 19.5l1.1-3.9A8 8 0 1 1 20 11.5Z"/>',
  chats: '<path d="M14.5 9.5h3A2.5 2.5 0 0 1 20 12v8l-3-2.5h-4.5A2.5 2.5 0 0 1 10 15v-.5"/><path d="M4 7a2.5 2.5 0 0 1 2.5-2.5H12A2.5 2.5 0 0 1 14.5 7v5a2.5 2.5 0 0 1-2.5 2.5H7L4 17Z"/>',
  'phone-call': '<path d="M8.6 4.5H6.2a1.7 1.7 0 0 0-1.7 1.8c.3 7.3 5.9 12.9 13.2 13.2a1.7 1.7 0 0 0 1.8-1.7v-2.4a1 1 0 0 0-.7-1l-3-1a1 1 0 0 0-1.1.3l-1.3 1.6a12 12 0 0 1-5-5l1.6-1.3a1 1 0 0 0 .3-1.1l-1-3a1 1 0 0 0-.7-.4Z"/>',
  rss: '<path d="M5 11a8 8 0 0 1 8 8M5 5a14 14 0 0 1 14 14"/><circle cx="6" cy="18" r="1.3"/>',

  // Media
  music: '<path d="M9 17.5v-12l10-2v12"/><circle cx="6.5" cy="17.5" r="2.5"/><circle cx="16.5" cy="15.5" r="2.5"/>',
  'volume-x': '<path d="M4.5 9.5v5H8l4.5 4v-13L8 9.5Z"/><path d="m15.5 9.5 5 5M20.5 9.5l-5 5"/>',
  headphones: '<path d="M4.5 17v-4.5a7.5 7.5 0 0 1 15 0V17"/><rect x="4.5" y="13.5" width="4" height="6.5" rx="1.5"/><rect x="15.5" y="13.5" width="4" height="6.5" rx="1.5"/>',
  camera: '<path d="M4 8.5A1.5 1.5 0 0 1 5.5 7h2.2l1.5-2h5.6l1.5 2h2.2A1.5 1.5 0 0 1 20 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 17.5Z"/><circle cx="12" cy="12.75" r="3.25"/>',
  film: '<rect x="4" y="3.5" width="16" height="17" rx="2.5"/><path d="M8 3.5v17M16 3.5v17M4 8h4M4 12h16M4 16h4M16 8h4M16 16h4"/>',
  'skip-forward': '<path d="M6 6.5v11l8-5.5Z"/><path d="M17.5 6v12"/>',
  'skip-back': '<path d="M18 6.5v11L10 12Z"/><path d="M6.5 6v12"/>',
  'play-circle': '<circle cx="12" cy="12" r="8.5"/><path d="M10 8.8v6.4a.6.6 0 0 0 .9.5l5-3.2a.6.6 0 0 0 0-1l-5-3.2a.6.6 0 0 0-.9.5Z"/>',
  shuffle: '<path d="M4 7h3.2a3 3 0 0 1 2.5 1.3l4.6 7.4a3 3 0 0 0 2.5 1.3H20M4 17h3.2a3 3 0 0 0 2.5-1.3l.6-1M13.7 9.3l.6-1A3 3 0 0 1 16.8 7H20M17.5 4.5 20 7l-2.5 2.5M17.5 14.5 20 17l-2.5 2.5"/>',
  captions: '<rect x="3.5" y="5.5" width="17" height="13" rx="2.5"/><path d="M7 12.5h3M12.5 12.5H17M7 15.5h6M15.5 15.5H17"/>',

  // Commerce
  store: '<path d="M4 9.5 5.5 4.5h13L20 9.5M4 9.5a2.67 2.67 0 0 0 5.33 0 2.67 2.67 0 0 0 5.34 0 2.67 2.67 0 0 0 5.33 0M5.5 12v7.5h13V12M10 19.5v-4h4v4"/>',
  coins: '<ellipse cx="9" cy="7" rx="5" ry="2.5"/><path d="M4 7v4c0 1.4 2.2 2.5 5 2.5M4 11v4c0 1.4 2.2 2.5 5 2.5"/><ellipse cx="15" cy="13" rx="5" ry="2.5"/><path d="M10 13v4c0 1.4 2.2 2.5 5 2.5s5-1.1 5-2.5v-4"/>',
  banknote: '<rect x="3" y="6.5" width="18" height="11" rx="2"/><circle cx="12" cy="12" r="2.5"/><path d="M6.5 12h.01M17.5 12h.01"/>',
  scan: '<path d="M4 8V5.5A1.5 1.5 0 0 1 5.5 4H8M16 4h2.5A1.5 1.5 0 0 1 20 5.5V8M20 16v2.5a1.5 1.5 0 0 1-1.5 1.5H16M8 20H5.5A1.5 1.5 0 0 1 4 18.5V16M8 8.5v7M11 8.5v7M13.5 8.5v7M16 8.5v7"/>',
  euro: '<path d="M18.5 6.5a6.5 6.5 0 1 0 0 11M5.5 10.5h9M5.5 13.5h9"/>',
  dollar: '<path d="M12 3.5v17M16.5 7.5c-.6-1.4-2.3-2.3-4.5-2.3-2.6 0-4.3 1.3-4.3 3.2 0 4.4 9 2.4 9 6.9 0 2-1.9 3.4-4.7 3.4-2.3 0-4-1-4.7-2.6"/>',
  'badge-percent': '<path d="M12 3.5 14.4 5l2.8-.1.9 2.7 2.3 1.6-.9 2.7.9 2.7-2.3 1.6-.9 2.7-2.8-.1L12 20.5 9.6 19l-2.8.1-.9-2.7-2.3-1.6.9-2.7-.9-2.7 2.3-1.6.9-2.7 2.8.1Z"/><path d="m9.5 14.5 5-5M9.7 9.7h.01M14.3 14.3h.01"/>',
  crown: '<path d="M4 8.5 7.5 12 12 5.5l4.5 6.5L20 8.5 18.5 17h-13ZM5.5 20h13"/>',
  gem: '<path d="M7 4.5h10l3.5 5L12 20 3.5 9.5ZM3.5 9.5h17M9.5 4.5l-1 5L12 20M14.5 4.5l1 5L12 20"/>',

  // Devices
  laptop: '<rect x="5" y="5" width="14" height="10.5" rx="1.5"/><path d="M2.5 18.5h19"/>',
  watch: '<rect x="6.5" y="6.5" width="11" height="11" rx="3"/><path d="M9 6.5l.5-3h5l.5 3M9 17.5l.5 3h5l.5-3M12 9.5V12l1.5 1"/>',
  keyboard: '<rect x="2.5" y="6" width="19" height="12" rx="2.5"/><path d="M6 9.75h.01M10 9.75h.01M14 9.75h.01M18 9.75h.01M6 14.25h.01M18 14.25h.01M9 14.25h6"/>',
  mouse: '<rect x="6.5" y="3.5" width="11" height="17" rx="5.5"/><path d="M12 7v3"/>',
  cpu: '<rect x="6.5" y="6.5" width="11" height="11" rx="2"/><rect x="9.5" y="9.5" width="5" height="5" rx="1"/><path d="M9.5 3.5v3M14.5 3.5v3M9.5 17.5v3M14.5 17.5v3M3.5 9.5h3M3.5 14.5h3M17.5 9.5h3M17.5 14.5h3"/>',
  battery: '<rect x="3" y="7.5" width="16" height="9" rx="2.5"/><path d="M21 10.5v3M6.5 10.5v3M9.5 10.5v3"/>',
  wifi: '<path d="M2.5 9a13.5 13.5 0 0 1 19 0M5.5 12.3a9 9 0 0 1 13 0M8.6 15.5a4.6 4.6 0 0 1 6.8 0"/><path d="M12 19h.01"/>',
  bluetooth: '<path d="m7 7.5 10 9-5 4.5V3l5 4.5-10 9"/>',
  tv: '<rect x="3" y="7" width="18" height="12.5" rx="2.5"/><path d="m8.5 3.5 3.5 3.5 3.5-3.5"/>',
  gamepad: '<path d="M7 7h10a4.5 4.5 0 0 1 4.4 5.4l-.9 4.4a2.5 2.5 0 0 1-4.3 1.2L14 15.5h-4L7.8 18a2.5 2.5 0 0 1-4.3-1.2l-.9-4.4A4.5 4.5 0 0 1 7 7Z"/><path d="M7.5 10v3M6 11.5h3M15.5 11.5h.01M17.5 11.5h.01"/>',

  // Weather and nature
  'cloud-rain': '<path d="M7.2 16h9a4 4 0 0 0 .4-8 5 5 0 0 0-9.7 1.1A3.5 3.5 0 0 0 7.2 16Z"/><path d="m8.5 18.5-1 2M12.5 18.5l-1 2M16.5 18.5l-1 2"/>',
  snowflake: '<path d="M12 3.5v17M4.6 7.75l14.8 8.5M4.6 16.25l14.8-8.5M9.5 4.5 12 6.5l2.5-2M9.5 19.5 12 17.5l2.5 2"/>',
  wind: '<path d="M3.5 9h11a2.5 2.5 0 1 0-2.5-2.5M3.5 15h14a2.5 2.5 0 1 1-2.5 2.5M3.5 12h16"/>',
  droplet: '<path d="M12 3.5c3.5 4.2 6 7.3 6 10.5a6 6 0 0 1-12 0c0-3.2 2.5-6.3 6-10.5Z"/>',
  sprout: '<path d="M12 20.5V11M12 11c0-3.5-2.5-6-6.5-6 0 3.5 2.5 6 6.5 6ZM12 13.5c0-3 2.2-5 6.5-5 0 3-2.2 5-6.5 5Z"/>',
  tree: '<path d="M12 21v-5M12 3.5 6 11h2.5L5 16h14l-3.5-5H18Z"/>',
  mountain: '<path d="M3 19 9.5 6l4 7.5 2.2-3.5L21 19Z"/>',
  thermometer: '<path d="M14.5 13.6V5.5a2.5 2.5 0 0 0-5 0v8.1a4 4 0 1 0 5 0Z"/><path d="M12 10v6.7"/>',
  umbrella: '<path d="M3.5 12a8.5 8.5 0 0 1 17 0Z"/><path d="M12 12v6.5a2 2 0 0 1-4 0"/>',
  flame: '<path d="M12 21a6.5 6.5 0 0 0 6.5-6.5c0-4-3-6.5-4.5-10.5-1.5 2.5-2 4-2 6-1-1-1.5-2-1.5-3.5C8 8.5 5.5 11 5.5 14.5A6.5 6.5 0 0 0 12 21Z"/>',
  sunrise: '<path d="M7 16a5 5 0 0 1 10 0M3.5 19.5h17M12 4v5M9.5 6.5 12 4l2.5 2.5M4.8 11.2l1.4 1M19.2 11.2l-1.4 1"/>',
  paw: '<circle cx="5.5" cy="10.5" r="1.8"/><circle cx="9.5" cy="6.5" r="1.8"/><circle cx="14.5" cy="6.5" r="1.8"/><circle cx="18.5" cy="10.5" r="1.8"/><path d="M12 11.5c2.3 0 5 3.4 5 5.6 0 1.6-1.3 2.4-2.6 2.4-1 0-1.6-.5-2.4-.5s-1.4.5-2.4.5C8.3 19.5 7 18.7 7 17.1c0-2.2 2.7-5.6 5-5.6Z"/>',

  // Numbers and charts
  'line-chart': '<path d="M4 4v16h16"/><path d="m7.5 14.5 3.5-4 3 2.5 4.5-5.5"/>',
  'bar-chart-horizontal': '<path d="M4 4v16M7.5 7.5h6M7.5 12h11M7.5 16.5h8"/>',
  gauge: '<path d="M4.5 18.5a8.5 8.5 0 1 1 15 0"/><path d="m12 15.5 3.5-4.5"/><circle cx="12" cy="16" r="1.2"/>',
  calculator: '<rect x="5" y="3.5" width="14" height="17" rx="2.5"/><rect x="8" y="6.5" width="8" height="3" rx=".8"/><path d="M8.5 13h.01M12 13h.01M15.5 13h.01M8.5 16.5h.01M12 16.5h.01M15.5 16.5h.01"/>',
  sigma: '<path d="M17.5 5.5h-11l6 6.5-6 6.5h11"/>',
  infinity: '<path d="M12 12c-1.8-2.4-3.4-3.6-5-3.6a3.6 3.6 0 0 0 0 7.2c1.6 0 3.2-1.2 5-3.6s3.4-3.6 5-3.6a3.6 3.6 0 0 1 0 7.2c-1.6 0-3.2-1.2-5-3.6Z"/>',

  // People
  'user-check': '<circle cx="10" cy="8.5" r="3.5"/><path d="M3.5 19.5c1-3.3 3.4-5 6.5-5 1.5 0 2.8.4 3.8 1.1M15 17l2 2 3.5-4"/>',
  'user-minus': '<circle cx="10" cy="8.5" r="3.5"/><path d="M3.5 19.5c1-3.3 3.4-5 6.5-5 1.5 0 2.8.4 3.8 1.1M15 16.5h6"/>',
  'user-circle': '<circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="10" r="3"/><path d="M6.5 18.3c1.2-1.9 3.2-3 5.5-3s4.3 1.1 5.5 3"/>',
  'id-card': '<rect x="3" y="5" width="18" height="14" rx="2.5"/><circle cx="9" cy="11" r="2"/><path d="M5.8 16c.6-1.4 1.8-2.2 3.2-2.2s2.6.8 3.2 2.2M14.5 10H18M14.5 13.5H17"/>',
  smile: '<circle cx="12" cy="12" r="8.5"/><path d="M8.5 14a4.5 4.5 0 0 0 7 0M9.2 9.3v.6M14.8 9.3v.6"/>',
  accessibility: '<circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="7.8" r="1.1"/><path d="m8 10.2 4 .8 4-.8M12 11v3l-2 3.5M12 14l2 3.5"/>',

  // Places
  landmark: '<path d="M3.5 9 12 4l8.5 5ZM5.5 9v8M9.8 9v8M14.2 9v8M18.5 9v8M3.5 20h17M4.5 17h15"/>',
  map: '<path d="M3.5 6.5 9 4.5l6 2 5.5-2v13l-5.5 2-6-2-5.5 2Z"/><path d="M9 4.5v13M15 6.5v13"/>',
  navigation: '<path d="M12 3.5 19 20l-7-3.5L5 20Z"/>',
  locate: '<circle cx="12" cy="12" r="6.5"/><circle cx="12" cy="12" r="2"/><path d="M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21"/>',
  anchor: '<circle cx="12" cy="5.5" r="2"/><path d="M12 7.5v13M8.5 11h7M4.5 13a7.5 7.5 0 0 0 15 0"/>',

  // Tools
  scissors: '<circle cx="6.5" cy="7" r="2.5"/><circle cx="6.5" cy="17" r="2.5"/><path d="M8.6 8.4 20 17M8.6 15.6 20 7"/>',
  brush: '<path d="m18.5 3.5-8.5 8.5 2 2 8.5-8.5a1.4 1.4 0 0 0-2-2Z"/><path d="M10 12c-2 0-3.5 1.3-3.5 3.2 0 1.6-.9 2.6-2.5 3.3 3 1.6 7.5.5 8-4.5Z"/>',
  ruler: '<g transform="rotate(-45 12 12)"><rect x="3" y="8.5" width="18" height="7" rx="1.5"/><path d="M7 8.5V11M10 8.5V10M13 8.5V11M16 8.5V10"/></g>',
  magnet: '<path d="M5.5 5v6.5a6.5 6.5 0 0 0 13 0V5h-4v6.5a2.5 2.5 0 0 1-5 0V5Z"/><path d="M5.5 9h4M14.5 9h4"/>',
  puzzle: '<path d="M9 5.5H5a1 1 0 0 0-1 1v4a2 2 0 1 1 0 4v4a1 1 0 0 0 1 1h4a2 2 0 1 1 4 0h4a1 1 0 0 0 1-1v-4a2 2 0 1 0 0-4v-4a1 1 0 0 0-1-1h-4a2 2 0 1 0-4 0Z"/>',
  wand: '<path d="m4.5 19.5 11-11M13.5 6.5l4 4M18 3.5v3M16.5 5h3M19.5 13v2M18.5 14h2M9.5 4v2M8.5 5h2"/>',
  crop: '<path d="M7 3.5V17h13.5M3.5 7H17v13.5"/>',
  eraser: '<path d="M8.5 19.5 4 15a1.5 1.5 0 0 1 0-2.1l9.4-9.4a1.5 1.5 0 0 1 2.1 0l5 5a1.5 1.5 0 0 1 0 2.1l-8.9 8.9ZM9 8l7 7M8.5 19.5h11"/>',

  // Education
  'graduation-cap': '<path d="M2.5 9.5 12 5l9.5 4.5L12 14Z"/><path d="M6.5 11.5v4c0 1.4 2.5 3 5.5 3s5.5-1.6 5.5-3v-4M21.5 9.5v5"/>',
  lightbulb: '<path d="M9 17.5h6M10 20.5h4M9 17.5c0-2-3-3.5-3-7.5a6 6 0 0 1 12 0c0 4-3 5.5-3 7.5"/>',
  award: '<circle cx="12" cy="9" r="5.5"/><path d="M8.8 13.5 7.5 20.5l4.5-2.5 4.5 2.5-1.3-7"/>',
  trophy: '<path d="M7.5 4.5h9V10a4.5 4.5 0 0 1-9 0ZM7.5 6.5h-3V8a3 3 0 0 0 3 3M16.5 6.5h3V8a3 3 0 0 1-3 3M12 14.5v3M8.5 20.5h7M9.5 20.5c0-1.7 1.1-3 2.5-3s2.5 1.3 2.5 3"/>',
  notebook: '<rect x="5.5" y="3.5" width="13" height="17" rx="2"/><path d="M9 3.5v17M3.5 7.5H7M3.5 12H7M3.5 16.5H7M12 8h3.5"/>',
  flask: '<path d="M9.5 3.5h5M10 3.5V9l-5.2 9a1.6 1.6 0 0 0 1.4 2.5h11.6a1.6 1.6 0 0 0 1.4-2.5L14 9V3.5M7.5 14.5h9"/>',
  glasses: '<circle cx="6.5" cy="14" r="3.5"/><circle cx="17.5" cy="14" r="3.5"/><path d="M10 13.5a2.5 2.5 0 0 1 4 0M3 13l2-5.5M21 13l-2-5.5"/>',
  atom: '<circle cx="12" cy="12" r="1.3"/><ellipse cx="12" cy="12" rx="9" ry="3.6"/><ellipse cx="12" cy="12" rx="9" ry="3.6" transform="rotate(60 12 12)"/><ellipse cx="12" cy="12" rx="9" ry="3.6" transform="rotate(120 12 12)"/>',
  presentation: '<path d="M3.5 4.5h17M5 4.5v10A1.5 1.5 0 0 0 6.5 16h11a1.5 1.5 0 0 0 1.5-1.5v-10M12 16v3M8.5 20.5 12 19l3.5 1.5M8.5 12 11 9.5l2 2 3-3"/>',

  // Health
  'heart-pulse': '<path d="M12 19.5s-7.5-4.4-7.5-10A4.3 4.3 0 0 1 12 7a4.3 4.3 0 0 1 7.5 2.5c0 5.6-7.5 10-7.5 10Z"/><path d="M4.8 12.5h3.7L10 10l2.5 4.5 1.5-2h5.2"/>',
  pill: '<rect x="4" y="8.5" width="16" height="7" rx="3.5" transform="rotate(-45 12 12)"/><path d="m9.5 9.5 5 5"/>',
  stethoscope: '<path d="M6 3.5H5a1 1 0 0 0-1 1V9a4.5 4.5 0 0 0 9 0V4.5a1 1 0 0 0-1-1h-1M8.5 13.5v1a5 5 0 0 0 10 0V12"/><circle cx="18.5" cy="10" r="2"/>',
  medical: '<path d="M9.5 4.5h5v5h5v5h-5v5h-5v-5h-5v-5h5Z"/>',
  dumbbell: '<rect x="5.5" y="6.5" width="3" height="11" rx="1"/><rect x="15.5" y="6.5" width="3" height="11" rx="1"/><path d="M8.5 12h7M3.5 9.5v5M20.5 9.5v5"/>',
  tooth: '<path d="M12 6.5c-1.5-1.3-3-2-4.5-2-2.3 0-3.5 1.9-3.5 4.3 0 2.2.9 3.7 1.5 5.2.6 1.7.8 3.5 1.4 5.2.3.9.8 1.3 1.4 1.3 1.6 0 1.1-5 3.7-5s2.1 5 3.7 5c.6 0 1.1-.4 1.4-1.3.6-1.7.8-3.5 1.4-5.2.6-1.5 1.5-3 1.5-5.2 0-2.4-1.2-4.3-3.5-4.3-1.5 0-3 .7-4.5 2Z"/>',

  // Food
  coffee: '<path d="M4.5 9h11v5.5A5.5 5.5 0 0 1 10 20a5.5 5.5 0 0 1-5.5-5.5ZM15.5 10.5H17a2.5 2.5 0 0 1 0 5h-1.5M7.5 3.5V6M10 3.5V6M12.5 3.5V6"/>',
  utensils: '<path d="M8.5 3.5v17M6 3.5V8a2.5 2.5 0 0 0 5 0V3.5M18 20.5v-17c-2.2 1-3.5 3.5-3.5 6.5V13H18"/>',
  wine: '<path d="M8 3.5h8l.5 4.5a4.5 4.5 0 0 1-9 0ZM12 12.5v8M8.5 20.5h7M7.6 7.5h8.8"/>',
  apple: '<path d="M12 7.5c-1-.9-2.3-1.3-3.6-1.1C5.9 6.8 4.5 9 4.5 11.8c0 4 2.8 8.7 5.3 8.7 1 0 1.4-.6 2.2-.6s1.2.6 2.2.6c2.5 0 5.3-4.7 5.3-8.7 0-2.8-1.4-5-3.9-5.4-1.3-.2-2.6.2-3.6 1.1ZM12 7.5c0-2 1-3.5 3-4"/>',
  cake: '<path d="M4.5 20.5h15M5.5 20.5V13A1.5 1.5 0 0 1 7 11.5h10a1.5 1.5 0 0 1 1.5 1.5v7.5M5.5 15.5c1.1 0 1.6-1 2.6-1s1.6 1 2.6 1 1.6-1 2.6-1 1.6 1 2.6 1 1.6-1 2.6-1M12 11.5V9"/><path d="M12 8c-.8 0-1.3-.6-1.3-1.3 0-.9 1.3-2.2 1.3-2.2s1.3 1.3 1.3 2.2c0 .7-.5 1.3-1.3 1.3Z"/>',
  pizza: '<path d="M12 20 3.8 5.8a16 16 0 0 1 16.4 0Z"/><path d="M5.3 8.4a13 13 0 0 1 13.4 0"/><circle cx="10.5" cy="11" r="1"/><circle cx="13.5" cy="14" r="1"/>',
  'chef-hat': '<path d="M7.5 15.5a3.5 3.5 0 0 1-.4-7 5 5 0 0 1 9.8 0 3.5 3.5 0 0 1-.4 7V20h-9Z"/><path d="M7.5 17h9"/>',
  soup: '<path d="M4 11h16a8 8 0 0 1-16 0ZM9 3.5c-.8 1 .8 2 0 3M12.5 3.5c-.8 1 .8 2 0 3M16 3.5c-.8 1 .8 2 0 3"/>',
  'ice-cream': '<path d="M6.6 10.5a5.4 5.4 0 1 1 10.8 0"/><path d="M6 10.5h12l-6 10Z"/><path d="m9.3 15 4.4-4.5"/>',

  // Travel
  plane: '<path transform="rotate(45 12 12)" d="M12 3c1 0 1.5 1 1.5 2.5v4l6.5 4v2l-6.5-2V18l2 1.5V21L12 20l-3.5 1v-1.5l2-1.5v-4.5l-6.5 2v-2l6.5-4v-4C10.5 4 11 3 12 3Z"/>',
  train: '<rect x="5.5" y="3.5" width="13" height="14" rx="3"/><path d="M5.5 11h13M9 14.5h.01M15 14.5h.01M8.5 20.5l1.5-3M15.5 20.5l-1.5-3"/>',
  car: '<path d="M4 15.5v-4l1.8-4.6a1.5 1.5 0 0 1 1.4-.9h9.6a1.5 1.5 0 0 1 1.4.9L20 11.5v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1ZM4 11.5h16M7 16.5v2M17 16.5v2M7 14h1.5M15.5 14H17"/>',
  bike: '<circle cx="6" cy="15.5" r="3.5"/><circle cx="18" cy="15.5" r="3.5"/><path d="M6 15.5 9 9h7l2 6.5M9 9l3 6.5H6M14.5 6.5H17l-1 2.5M8 7h2.5"/>',
  bus: '<rect x="4.5" y="3.5" width="15" height="15" rx="3"/><path d="M4.5 11h15M8 15h.01M16 15h.01M7.5 18.5v2M16.5 18.5v2M8.5 6.5h7"/>',
  ship: '<path d="M3.5 14.5h17l-2.3 4.5a1 1 0 0 1-.9.5H6.7a1 1 0 0 1-.9-.5ZM6.5 14.5v-4h11v4M9.5 10.5V7h5v3.5M12 7V4"/>',
  luggage: '<rect x="5.5" y="7" width="13" height="12.5" rx="2"/><path d="M9.5 7V5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2M9 7v12.5M15 7v12.5M8 19.5V21M16 19.5V21"/>',
  ticket: '<path d="M4.5 5.5h15a1 1 0 0 1 1 1v3a2.5 2.5 0 0 0 0 5v3a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1v-3a2.5 2.5 0 0 0 0-5v-3a1 1 0 0 1 1-1Z"/><path d="M14.5 5.5v2M14.5 11v2M14.5 16.5v2"/>',
  bed: '<path d="M3.5 19.5v-14M3.5 15.5h17v4M20.5 15.5V12A2.5 2.5 0 0 0 18 9.5h-7.5v6"/><circle cx="7" cy="11.5" r="1.8"/>',
  tent: '<path d="M2.5 19.5 12 4.5l9.5 15ZM9 19.5l3-5.5 3 5.5"/>',
  passport: '<rect x="5.5" y="3.5" width="13" height="17" rx="2"/><circle cx="12" cy="10.5" r="3"/><path d="M9.5 16.5h5"/>',

  // Media controls
  'rotate-cw': '<path d="M19.5 12a7.5 7.5 0 1 1-2.2-5.3M19.5 4.5V9H15"/>',
  rewind: '<path d="M11.5 7v10L4.5 12Z"/><path d="M19.5 7v10l-7-5Z"/>',
  'fast-forward': '<path d="M12.5 7v10l7-5Z"/><path d="M4.5 7v10l7-5Z"/>',
  // Added for services, trust, press and AI sections
  ban: '<circle cx="12" cy="12" r="8.5"/><path d="M6 6l12 12"/>',
  bug: '<rect x="7.5" y="8" width="9" height="12" rx="4.5"/><path d="M9.5 8a2.5 2.5 0 0 1 5 0M12 12v8M7.5 13H4M20 13h-3.5M7.5 17.5 5 19M16.5 17.5 19 19M7.5 9.5 5 8M16.5 9.5 19 8"/>',
  newspaper: '<path d="M5.5 4.5h11a1 1 0 0 1 1 1V18a1.5 1.5 0 0 0 3 0V9.5h-3M5.5 4.5a1 1 0 0 0-1 1V18a1.5 1.5 0 0 0 1.5 1.5H19"/><path d="M8 8.5h6M8 12h6M8 15.5h3.5"/>',
  bot: '<rect x="4.5" y="8" width="15" height="11" rx="3"/><path d="M12 8V4.5M9.5 13v1M14.5 13v1M2.5 13v2M21.5 13v2"/><circle cx="12" cy="4" r=".6"/>',
  pipette: '<path d="M15.4 5.1a2.3 2.3 0 0 1 3.3 3.3L17 10.1 13.9 7zM12.6 5.7l5.7 5.7M14.5 8.9l-7.8 7.8a1.6 1.6 0 0 0-.4.7l-.8 2.8 2.8-.8a1.6 1.6 0 0 0 .7-.4l7.8-7.8"/>',
  cat: '<path d="M5.2 11 4.8 4.5 9 7.3c1.9-.6 4.1-.6 6 0l4.2-2.8-.4 6.5"/><path d="M5.2 11c-.2 5 2.9 8.5 6.8 8.5s7-3.5 6.8-8.5"/><path d="M9.5 12v.8M14.5 12v.8M11.2 15.2h1.6L12 16.2Z"/>',
  dog: '<path d="M7.5 9c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5v4.5c0 3.3-2 6-4.5 6s-4.5-2.7-4.5-6Z"/><path d="M7.6 8.2 5 6.9c-.8-.4-1.7.3-1.5 1.2l.9 4.4c.2.9 1.3 1.1 1.8.4l1.3-1.7M16.4 8.2 19 6.9c.8-.4 1.7.3 1.5 1.2l-.9 4.4c-.2.9-1.3 1.1-1.8.4l-1.3-1.7"/><path d="M10 11v.8M14 11v.8M11 15h2l-1 1.2Z"/>',
  rabbit: '<path d="M10.2 9.4C8.8 7 8.4 4.6 9.2 3.7c1.1-1.2 2.6 1 2.8 5.3M13.8 9.4c1.4-2.4 1.8-4.8 1-5.7-1.1-1.2-2.6 1-2.8 5.3"/><circle cx="12" cy="14.5" r="5.5"/><path d="M10 14v.8M14 14v.8M11.2 17h1.6"/>',
  bird: '<path d="M17.5 9.5a4 4 0 0 0-7.8-1.3L4 14.5c3.2 3 8.2 3.6 11.2 1.4 1.8-1.3 2.6-3.5 2.3-6.4l2.5-1.2-2.7-1.4"/><path d="M10.5 17.5v3M13.5 17v3.5M14.2 8.3v.6"/><path d="M8.5 13.5c1.5.3 3.2-.2 4.5-1.5"/>',
  syringe: '<path d="m17.5 3 3.5 3.5M19.25 4.75l-3 3M14.5 5.5l4 4M16.5 7.5l-8.5 8.5H5v-3l8.5-8.5M10.5 9.5l1.5 1.5M8.5 11.5l1.5 1.5M5 19l-2 2"/>',
} as const;

export type IconName = keyof typeof ICONS;
export const ICON_NAMES = Object.keys(ICONS) as IconName[];

export interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, 'name'> {
  name: IconName;
  size?: number;
  /** Label for screen readers. Without it the icon is decorative and hidden. */
  label?: string;
}

export function Icon({ name, size = 20, label, className, strokeWidth = 1.6, ...rest }: IconProps) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width={size}
      height={size}
      fill="none"
      stroke="currentColor"
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
      role={label ? 'img' : undefined}
      aria-label={label}
      aria-hidden={label ? undefined : true}
      className={cn('shrink-0', className)}
      dangerouslySetInnerHTML={{ __html: ICONS[name] }}
      {...rest}
    />
  );
}

Frequent questions

How do I install Icons?

With aiw add @ai-website/icon. The command puts components/ui/icon.tsx into your project, the code is yours from then on. It needs no further npm packages.

Which variants does Icons have?

3 variants, All icons, Sizes and weights and Containers.

Can an AI assistant build with Icons?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Icons with aiw_components and install it with aiw_add @ai-website/icon.

Often searched

Jump to

Copied to the clipboard