Icon

Render inline Iconify SVG icons from a prefix and icon name.

Icon renders an inline SVG from Iconify data. Pass a full Iconify name in the prefix:icon format, such as lucide:star or simple-icons:github.

Import

import { Icon } from '@prosefly/astro-components';

Inline Usage

Icons are inline by default and inherit the surrounding text size when size, width, and height are omitted.

Favorite this page

GitHub links often appear next to repository metadata, external resources, or social links.

<Icon name="lucide:star" /> Favorite this page

GitHub <Icon name="simple-icons:github" /> links often appear next to repository
metadata.

Sizing

Use size to set width and height together. Use width and height only when the icon intentionally needs a non-square box.

1em

18px

inherited

<Icon name="lucide:search" />
<Icon name="lucide:search" size="18" />
<Icon name="lucide:search" width="20" height="16" />

Accessible Icons

Decorative icons are hidden from assistive technology by default. Add title when the icon itself communicates meaning without adjacent text.

This icon has an accessible title.

<Icon name="lucide:circle-alert" title="Warning" /> This icon has an accessible
title.

If visible text already explains the icon, leave title unset.

Icon Sources

Icon loads data from the Iconify API during server rendering or static build. Builds therefore need network access unless you provide an internal Iconify-compatible API endpoint with apiBase.

<Icon name="lucide:sparkles" apiBase="https://api.iconify.design" />

When the Lotus integration is installed, it preloads static icon usage in Astro and MDX files and groups requests by Iconify prefix. For example, lucide:star, lucide:search, and lucide:copy can be fetched through one lucide request.

Icons that cannot be detected statically still fall back to an individual API request.

Props

Prop	Type	Default	Notes
`name`	`string`	required	Iconify name such as `lucide:star`.
`title`	`string`	optional	Adds an accessible SVG title and `role="img"`.
`size`	`string \| number`	`1em`	Sets width and height together.
`width`	`string \| number`	`size`	Overrides SVG width.
`height`	`string \| number`	`size`	Overrides SVG height.
`class`	`string`	optional	Adds classes to the rendered SVG.
`focusable`	`string`	`'false'`	Sets the SVG `focusable` attribute.
`apiBase`	`string`	`'https://api.iconify.design'`	Iconify-compatible API endpoint.

Unknown attributes are passed to the rendered SVG.

Syntax Rules

Use the full prefix:icon Iconify name.
Keep icons inline with text unless a surrounding component handles layout.
Add title only when the icon has standalone meaning.
Prefer consistent icon families within the same UI region.

Edit this page

Last updated Jul 18, 2026