Icon

Renders an icon by semantic name. A site remaps glyphs by aliasing @evolve-storefront/ui/icons to its own map, which spreads @evolve-storefront/ui/default-icons and overrides keys.

import { Icon } from "@evolve-storefront/ui/icon";

Design notes

Decorative by default (aria-hidden). For a standalone icon pass aria-hidden={false} with role="img" and an aria-label.

Preview

DefaultOpen in Storybook ↗

Usage

import { Icon } from "@evolve-storefront/ui/icon";

<Button>
  <Icon name="shoppingList" />
  {t("addToShoppingList")}
</Button>;

Props

No props of its own.

Examples

All IconsEvery name in the set.

// Any key of the map is a valid name; the type lists them all.
import type { IconName } from "@evolve-storefront/ui/icons";

const name: IconName = "orders";
<Icon name={name} className="size-5" />;

Open in Storybook ↗

Roles Not ShapesTwo roles may share a glyph today and still deserve separate names — add (create a thing) and increment (raise a number) can diverge later without touching a call site.

// Same glyph today: pick the name for the role the control plays.
<Button>
  <Icon name="add" />
  {t("addAddress")}
</Button>
<Button variant="tertiary" isIconOnly aria-label={t("increaseQuantity")}>
  <Icon name="increment" />
</Button>

Open in Storybook ↗

Account NavigationThe account-navigation roles, added for the b2c account migration.

<NavItem href="/account/orders" isCurrent={pathname === "/account/orders"}>
  <Icon name="orders" />
  {t("orders")}
</NavItem>;

Open in Storybook ↗

Distinct Roleswishlist (a heart) and shoppingList (a list) are separate roles, so an app with both concepts can remap one without silently changing the other.

// icons.ts in the app, aliased as @evolve-storefront/ui/icons: remap one role, the other keeps its glyph.
import { icons as baseIcons } from "@evolve-storefront/ui/default-icons";
import { Star } from "lucide-react";

export const icons = { ...baseIcons, wishlist: Star };

Open in Storybook ↗

Styled Via Data Slot[data-component="icon"] restyles every icon globally, without ejecting.

/* every icon */
[data-component="icon"] { color: var(--color-primary); }

/* one role, by name */
[data-component="icon"][data-icon="remove"] { color: var(--color-destructive); }

Open in Storybook ↗