# Icon

Edit inline icons and accessible labels in Starlight and Prosefly MDX documentation.

import ContentEditor from '@/components/editor/ContentEditor.astro';

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](/frameworks/astro/), [Starlight](/frameworks/starlight/), [Fumadocs](/frameworks/fumadocs/), and [Prosefly](/frameworks/lotus/) 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.

<ContentEditor content="icon" />

## Source example

```mdx
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`:

```mdx
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](/docs/editor/components/badge/) · [Link Button](/docs/editor/components/link-button/) · [Callout](/docs/editor/components/callout/).