Icons

Use Icon for a standalone icon. For a component icon prop, pass what that prop accepts: most, such as Button and IconButton, take an element like <Icon icon={BellIcon} />, and some menu and navigation items also accept the icon definition itself. This keeps sizing, color, and accessibility aligned with the system.

tsx
import {Button} from '@astryxdesign/core/Button';
import {Icon} from '@astryxdesign/core/Icon';
import {BellIcon} from '@heroicons/react/24/outline';
​
<Icon icon={BellIcon} size="sm" />
<Button label="Alerts" icon={<Icon icon={BellIcon} />} />

• Use one supported icon set consistently inside a template.
• Give an icon-only control its required visible or assistive label through the Astryx control API.
• Do not paste raw svg and path markup when an existing icon definition fits.
• Do not render a library icon directly when Icon or the receiving Astryx component can render it.
• Declare an icon library other than Astryx as a dependency (astryx docs cli/integrations/building-blocks/templates/build-the-template/package-and-test/export-template-assets).

A product mark or missing domain symbol can stay package-owned. Export a compatible icon definition from a public package path, then import that path from the template.

tsx
import {Icon} from '@astryxdesign/core/Icon';
import {AcmePulseIcon} from '@acme/astryx-widgets/icons/AcmePulseIcon';
​
<Icon icon={AcmePulseIcon} size="sm" label="Account health" />

Export the icon path and include its file in the package (astryx docs cli/integrations/building-blocks/templates/build-the-template/package-and-test/export-template-assets).

When you test the template in an app (astryx docs cli/integrations/building-blocks/templates/build-the-template/package-and-test/test-template-in-app), also confirm the following.

• Every icon state renders, including selected, disabled, loading, and narrow layouts.
• Meaningful icons have an accessible name, and decorative icons add no duplicate spoken text.
• No missing icon leaves an empty control.