Icon

Use Prosefly’s MDX component editor to edit inline icons and labels while keeping the syntax used by your Starlight or Prosefly site.

Supported profiles

The same editor supports the Astro, Starlight, Fumadocs, and Prosefly profiles. Select the profile that matches your site to see the component syntax and controls available for that integration.

Edit in Visual

Select the icon to open its controls. Use the icon picker to choose from the profile’s available icon sets, and the attributes panel to edit its supported descriptive label. Keep the nearby text meaningful without relying on the icon alone.

icon.mdx

StarlightProsefly

VisualSource

Reset example

Loading editor…

An interactive example. Changes stay on this page.

Source example

import { Icon } from '@astrojs/starlight/components';

## Ready to publish

The guide is ready <Icon name="rocket" label="Rocket" /> for review.

Profile differences

Prosefly uses named icons such as lucide:rocket with a title. Starlight uses its supported icon names and a label:

import { Icon } from '@astrojs/starlight/components';

Ready to publish <Icon name="rocket" label="Rocket" />.

The Fumadocs profile has no dedicated inline Icon feature. Icon selectors within other components do not imply support for a standalone Icon component. Use Source for custom icon components or unsupported icon properties.

Related MDX guides

Read next: Badge · Link Button · Callout.