Icon

There are three ways to use the Icon component:

Icons from the Apollion set via the icon prop: import the icon data and pass it to the component — import { pen } from '@apollion-dsi/core/icons' and then <Icon icon={pen} />. Each icon is plain JSON (viewBox + paths); importing only what you use tree-shakes the rest. Avoid import * as icons from '@apollion-dsi/core/icons' in product code to rebuild a name-based lookup — it defeats tree-shaking and pulls the entire icon set into the bundle.
Custom icons (third-party, or inline SVG) passed as children.
Remote icons via the src prop (fetches and inlines the SVG).

When to use

✅ Use when…	🚫 Avoid when…
To visually represent an action or concept (trash, upload, settings). Alongside text in buttons, lists and tables, to reinforce meaning. As a decorative element in chips, avatars and headers.	As an editorial illustration. Use `Image` or `Svg` directly. As the main clickable element. For that use `IconButton` — it has the correct touch area, semantics and focus.

Using Apollion icons

Import the icon from the set and pass it via icon (import { userConfig } from '@apollion-dsi/core/icons').

<Icon icon={userConfig} size="xl" color="danger" />

Using custom icons

For an external/custom SVG (outside the set), pass the element as children.

<Icon size="xl" color="danger">
  <VscSourceControl />
</Icon>
 
// or
 
<Icon size="xl" color="danger">
  <svg viewBox="0 0 24 24">
    <path d="..." />
  </svg>
</Icon>

Using icons with `src`

It is also possible to use a URL as the source. Note: prefer the previous approaches; there is a delay due to the fetch and the icon only appears after the download.

<Icon
  src="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/svgs/regular/clipboard.svg"
  size="xl"
  color="danger"
/>

Changing the size

You can use values defined in the theme (xs, small, xl, ...) or numeric values.

<Icon size={32} icon={userConfig} color="warning" />

Interactive Demo

Full gallery

To see the gallery with all available icons, use the Components / Icon → Example story in Storybook.

Properties


Prop	Type	Default	Description
`containment`	`string`	—	Containment marker for the `cq` channel: emits `container-type` (+ `container-name` when the string form carries one, e.g. `'inline-size card'`). Apply on the immediate wrapper of the adapting component — NEVER on page-level shells.
`icon`	`IconData`	—	JSON data of an icon from the set ({@link IconData}: `viewBox` + `paths`), imported from `@apollion-dsi/core/icons` (e.g. `import { trash } from '.../icons'`). `Icon` reads this data and assembles the `<svg>` via `Svg`. For an arbitrary SVG element use `children`. Has lower precedence than `children`.
`iconProps`	`Partial<DefaultSvgInterface>`	—	Extra props forwarded to the inner SVG (viewBox, stroke, etc.). @see {@link DefaultSvgInterface }
`legibility`	`"on-photo"`	—	Reading-shadow preset for text over a photographic background (`on-photo`). Replaces the inline `style={{ textShadow }}` in the consumer (brasil_2030 radar, gap A3). Token emission is deferred until a 2nd consumer asks for the raw var (see backlog).
`pageShell`	`boolean`	—	Centers the element and caps the width at `theme.layout.pageMaxWidth`. The page shell of a classic centered layout.
`readable`	`number \| boolean`	—	Makes the `color` legible against the page surface: `true` = WCAG AA (4.5), a number sets a custom floor. Ignored with `contrast`. See the Layout Props concept page for the full semantics.
`size`	`SpacingInterface`	—	Icon size, as a `theme.spacing` key. When omitted, the icon inherits the `font-size` from context (`1em`) — useful for following text. @example ```tsx <Icon icon={trash} size="large" /> ```
`src`	`string`	—	URL of an external SVG. When set, triggers a `fetch` and parses the result to insert it inline (preserving `currentColor`).
`title`	`string`	—	Accessible title of the icon. When set, it is injected into the SVG as `<title>` (helps screen readers). Decorative? Leave it undefined.
`transform`	`string`	—	CSS `transform` value (e.g. `translate(-50%, -33px)`). Never leaks to the DOM as an attribute.

Besides the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.