Icon Showcase
This page exercises the shortcode in many different content contexts.
Headings with Icons
Icons can appear in section headings to give visual cues.
Sub-heading Example
A sub-heading with an icon too.
Inline Prose
You can place icons inline: for love, for favorites, and for completion.
Icons with Options
A larger icon: renders at 24px.
An accessible icon: has an aria-label instead of aria-hidden.
Tables
Icons work inside table cells:
| Feature | Status | Icon |
|---|---|---|
| Rendering | Complete | |
| Search | In Progress | |
| Export | Planned |
Callouts
Note Note with Icon
This callout has an icon in its title.
Tip Tip
Use to insert any of the 1900+ Lucide icons.
Warning Warning
Some icons may not render if the name is misspelled.
Lists
Unordered list with icons:
- Documentation
- Source code
- Testing
- Packaging
Ordered list:
- Install the package
- Configure your project
- Run the build
Blockquotes
Icons render inside blockquotes too. This is useful for attributions and callouts.
Definition Lists
- Heart
- Represents love or favorites.
- Star
- Represents ratings or bookmarks.
- Zap
- Represents speed or energy.