● dokly3 min read

The Smallest New Editor Block Yet: Icon

Dokly's editor now has an inline icon you can drop into a sentence — for calling out a specific UI element without a screenshot. Here's what it does and what it deliberately leaves out.

The last post covered Update, a single block for hand-written changelog entries. This one is smaller still: not a block at all, but an inline icon you can drop into the middle of a sentence.

What it does#

Docs often need to point at a specific UI element without a full screenshot: "click the lock icon to manage security," "press the search icon to open the command palette." Before today, that meant either describing it in words or breaking the sentence to insert a screenshot. Icon lets the sentence keep going:

Click the icon to manage your project's security settings, or to search across every page.

That's two <Icon> tags sitting inline inside this paragraph's own MDX. The syntax:

MDX
Click the <Icon icon="lock" /> icon to open settings.

icon is required and takes the same kebab-case names as the icon prop on Card, Accordion, and Frame — one shared registry, so there's nothing new to learn if you've used those already. size defaults to 16px and takes any number; color is optional and accepts any valid CSS color, otherwise the icon inherits the surrounding text color.

A few more, so you can see it hold up across the available set: for launches, for contact, for a CLI reference.

What this doesn't do#

Icon is decorative by design — there's no accessible-label prop, matching Mintlify's own version of this component. The surrounding sentence is expected to carry the meaning ("click the lock icon" already says what it's for), the same way it would if you just wrote the word "lock" instead.

Also left out: Mintlify's Icon can pull from Font Awesome or point at a custom image file (iconType, src). Dokly doesn't have a Font Awesome integration anywhere in the product, and nothing on our side consumes a custom icon source yet, so there was nothing for those props to plug into. If an icon name isn't in the shared registry, Icon renders nothing rather than a broken image — worth knowing if you reach for a name that doesn't exist yet.

That brings Dokly to 18 top-level MDX components, up from 11 a couple of months ago. Still missing: Panel, Tooltips, Tree, and Fields — those are the next batches.

If you need an icon that isn't in the registry yet, reply to this post or use the contact page — it reaches me directly.

Changelog entries#

Icon component · Added · An inline icon for calling out a specific UI element mid-sentence, sharing the same icon registry as Card, Accordion, and Frame.

Written by Gautam Sharma, Founder Dokly

Building Dokly — documentation that doesn't cost a fortune. AI-ready docs out of the box.

Follow on X →
Start for free

Ready to build better docs?

Start creating beautiful, AI-ready documentation with Dokly today. No git, no YAML, no friction.

Get started free