`tsx
import { DynamicIcon } from 'stera-icons/dynamic';

// Load icon by name from external data
function IconDisplay({ iconName }) {
return (
name={iconName} // e.g., "search", "home", "user"
weight="bold" // optional: regular, bold, fill
duotone={false} // optional: enable duotone variant
size={24}
fallback={} // optional: show while loading
/>
);
}
`

When to use: Dynamic imports are ideal when you need to render a small number of icons whose names are determined at runtime (e.g., from a database, CMS, or user input).

When NOT to use: For displaying many icons at once (like an icon gallery), use direct imports instead - dynamic imports trigger individual network requests per icon.

Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | number \| string | 24 | Icon size in pixels |
| color | string | 'currentColor' | Icon color |
| weight | 'regular' \| 'bold' \| 'fill' | 'regular' | Icon weight (dynamic variants only) |
| duotone | boolean | false | Use duotone variant (dynamic variants only) |

The weight and duotone props are only available when importing from stera-icons/dynamic-variants. For regular imports, choose the specific variant you need (e.g., SearchBold, HomeFillDuotone).

All standard SVG props are also supported.

Accessibility

Stera Icons follows ARIA best practices:

`tsx
// Decorative icons (auto aria-hidden="true")