Iconography

Precise, professional, and sophisticated set of symbols to represent tasks or concepts in an application.

Home

Settings

Information

Alert

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.

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" />

Caution!

Minimal icon size is 16px (--spacing-4). Do not forget to apply min-h-4 min-w-4 classes for small scalable icons to avoid image distorsion in compact density modes.

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

0 icons found

Browse and search

Search by name, namespace, or tags. Click a tile (or activate it with Enter or Space) to copy the import { … } from '@by/icons/…' statement to the clipboard.

Reference

Piece	Description
`@by/icons/ui`	General UI glyphs (navigation affordances, actions, alerts, and common controls).
`@by/icons/nav`	Navigation-specific marks used in shells and menus.
`@by/icons/app`	Application and domain-oriented icons.
`@by/icons/flags`	Country and region flags.
`@by/icons/metadata`	JSON metadata (including tags per icon) used for search and documentation; import when building catalogs or tooling.

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.