tokens

Icons

Icon tokens available in the Breeze UI icon set. All 99 icons are rendered via the Icon component using the icon prop with camelCase names. They are available at any pixel size via the size prop (default 18) and inherit color from their parent element.

Usage Guidance

When to use

+Browse the complete 99-icon catalog for reference.
+Find the correct camelCase name for icons to use with the Icon component.
+Verify icon availability before using in code.

When not to use

−Don't guess icon names — check this reference.
−Don't use icons that aren't in the 99-icon set.

Examples

Code Samples

Navigation Icons

Icons commonly used for navigation, menus, and wayfinding.

<div className="flex gap-3 flex-wrap">
  {["chevronLeft", "chevronRight", "chevronDown", "chevronUp", "close", "arrowLeft", "dashboard"].map(name => (
    <div key={name} className="flex flex-col items-center gap-2 p-4 border border-gray-200 rounded-lg w-[100px]">
      <Icon icon={name} />
      <span className="text-[11px] text-gray-500 text-center">{name}</span>
    </div>
  ))}
</div>

Action Icons

Icons for common user actions like add, edit, delete, and search.

<div className="flex gap-3 flex-wrap">
  {["plus", "details", "trash", "search", "settings", "filter", "upload", "copy", "reload", "reorder"].map(name => (
    <div key={name} className="flex flex-col items-center gap-2 p-4 border border-gray-200 rounded-lg w-[100px]">
      <Icon icon={name} />
      <span className="text-[11px] text-gray-500 text-center">{name}</span>
    </div>
  ))}
</div>

Status Icons

Icons for communicating status, alerts, and informational states.

<div className="flex gap-3 flex-wrap">
  {["tickCircle", "warning", "infoFill", "critical", "time", "notify", "exclamationFill", "urgent"].map(name => (
    <div key={name} className="flex flex-col items-center gap-2 p-4 border border-gray-200 rounded-lg w-[100px]">
      <Icon icon={name} />
      <span className="text-[11px] text-gray-500 text-center">{name}</span>
    </div>
  ))}
</div>

Data & Content Icons

Icons for data display, content types, and object representation.

<div className="flex gap-3 flex-wrap">
  {["resource", "calendar", "paperFold", "map", "chat", "activity", "jobs", "contact", "phone"].map(name => (
    <div key={name} className="flex flex-col items-center gap-2 p-4 border border-gray-200 rounded-lg w-[100px]">
      <Icon icon={name} />
      <span className="text-[11px] text-gray-500 text-center">{name}</span>
    </div>
  ))}
</div>