DocsDocsSDKs

Icon

React SDK guidance for Icon.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

When to use it

Use Icon when application code wants the same semantic icon language that the SDK uses internally. It is the fastest path for rendering things like search icons, trust badges, cart chrome, and small decorative affordances without coupling your code to a specific icon library.

Reach for useIcon() instead when you are building your own composed component and need the resolved icon component directly.

The slot names are the API

Think in semantic slots like search, cart, chevronDown, and heartFilled, not in library-specific imports. The provider decides which actual SVG component each slot resolves to.

Slot strategy

The icon system has three layers:

  • IconSlotMap defines the complete semantic contract.
  • EnadProvider receives the active slot map through icons.
  • Icon and useIcon() read from that provider and render the resolved component.

If you do not pass icons, EnadProvider uses phosphorIcons by default.

For most apps, pick one of the shipped curated adapters for the whole tree:

  • phosphorIcons
  • lucideIcons
  • hugeIcons
  • carbonIcons

If a brand wants full control, supply a complete custom IconSlotMap.

If you only need to replace a subset of slots, use createIconifyIcons(\{ names \}). That lets the app keep the SDK's semantic slot contract while sourcing selected icons from Iconify.

State and theming guidance

Icons inherit their visual tone from normal classes like size-*, text-*, and layout utilities. Keep decorative icons aria-hidden, and give icon-only buttons their own accessible label on the interactive parent.

For Iconify-backed setup, keep the mapping explicit and use the standard prefix:name format shown by Icones. Any slot you leave out falls back to Phosphor unless you pass a different fallback map, so partial icon-set updates are safe and incremental.

Use adapter overrides when a curated family is almost right and you only need to swap a couple of slots. Use a full custom IconSlotMap when the product has its own icon library and every slot should be owned locally.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/icons.
  • Playground route: /sandbox?component=Icon.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

Icon

# Icon > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/icons`. - Live playground: [/components/base-ui/icon](https://sdk.enad.io/components/base-ui/icon). ## When to use it Use `Icon` when application code wants the same semantic icon language that the SDK uses internally. It is the fastest path for rendering things like search icons, trust badges, cart chrome, and small decorative affordances without coupling your code to a specific icon library. Reach for `useIcon()` instead when you are building your own composed component and need the resolved icon component directly. > **The slot names are the API** > > Think in semantic slots like `search`, `cart`, `chevronDown`, and `heartFilled`, not in > library-specific imports. The provider decides which actual SVG component each slot resolves to. ## Slot strategy The icon system has three layers: - `IconSlotMap` defines the complete semantic contract. - `EnadProvider` receives the active slot map through `icons`. - `Icon` and `useIcon()` read from that provider and render the resolved component. If you do not pass `icons`, `EnadProvider` uses `phosphorIcons` by default. For most apps, pick one of the shipped curated adapters for the whole tree: - `phosphorIcons` - `lucideIcons` - `hugeIcons` - `carbonIcons` If a brand wants full control, supply a complete custom `IconSlotMap`. If you only need to replace a subset of slots, use `createIconifyIcons({ names })`. That lets the app keep the SDK's semantic slot contract while sourcing selected icons from Iconify. ## State and theming guidance Icons inherit their visual tone from normal classes like `size-*`, `text-*`, and layout utilities. Keep decorative icons `aria-hidden`, and give icon-only buttons their own accessible label on the interactive parent. For Iconify-backed setup, keep the mapping explicit and use the standard `prefix:name` format shown by Icones. Any slot you leave out falls back to Phosphor unless you pass a different `fallback` map, so partial icon-set updates are safe and incremental. Use adapter `overrides` when a curated family is almost right and you only need to swap a couple of slots. Use a full custom `IconSlotMap` when the product has its own icon library and every slot should be owned locally. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/icons`. - Playground route: /sandbox?component=Icon. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes