Iconography

Icons are shipped as React components that render SVG from @by/icons. They align with Blue Yonder UX guidance and work with Experience System semantic color utilities (for example fill-accent-11, fill-neutral-12) and standard SVG attributes for size and accessibility. For the component API, installation, and live examples, see Icon.

Installation

Add @by/icons to your app. For patterns that use Experience System primitives (search field, tooltips, toasts in the catalog below), also depend on @by/experience-system.

pnpm add @by/icons

In this monorepo, reference the workspace packages (for example workspace:* or your catalog) so imports resolve to packages/icons and packages/experience-system.

Usage

Import only the icons you need from the right namespace entry point:

import { Home, Search, Settings, User } from '@by/icons/ui';

Each icon is a component that forwards props to the underlying <svg>. Use Tailwind classes to define size and color: scalable-* for size, ad step 9 for colored, or step 12 for default icon colors. Alternatively width and height properties can be used when Tailwind classes are not applicable:

<Home />
<User className="size-scaled-10 fill-accent-9" />
<Settings width={40} height={40} className="fill-neutral-12" />

For the full list of SVG attributes, see MDN’s <svg> element reference.

Product UX guidance for icon usage (metaphor, consistency, and when to use icons) is documented on Fractal Icon (Confluence).

Best practices

-Do not mix outlined and filled icons. Use outlined icons by default, and reserve filled variants to indicate a toggled state in toggle buttons.

• Do not use colored icons for purely decorative purposes. The neutral-*' color tokens should be the primary choice for most use cases. Use the success-9,error-9',warning-9, and `info-9' colors when conveying semantic meaning through color.

Examples

Browse and search

Search by name, namespace, or tags. Click a tile (or activate it with Enter or Space) to open icon details: a dialog on narrow viewports, or a side panel on wider screens that stays open while you browse other icons. Adjust size and color, preview the glyph, and copy the icon name, import line, or usage snippet.

Reference

Source components and build scripts live under packages/icons in the repository.

Accessibility

Treat icons as decorative when nearby text already conveys the same meaning: prefer aria-hidden on the icon in that case. When the icon is the only visible indicator of meaning (for example an icon-only button), provide an accessible name with aria-label / title on the interactive parent, or use visible text where possible. See also Accessibility for broader guidance on not relying on images alone to convey information.