Icon

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/devscribe-team/webeditor/llms.txt

Use this file to discover all available pages before exploring further.

​

Overview

• Adding visual indicators inline with text
• Creating icon lists or feature callouts
• Enhancing button or link text
• Providing visual context to headings

​

Insertion

1. Type / to open the command menu
2. Search for “icon”
3. Select the Icon option

<icon name="Star" size="24" />

​

Attributes

​

Node specification

export const iconNodeSpec: NodeSpec = {
  group: "inline",
  inline: true,
  atom: true,
  selectable: false,
  attrs: {
    name: { default: "FileText" },
    size: { default: 20 },
  },
};

​

Usage examples

​

Inline icon with text

Click the <icon name="Settings" size="16" /> settings icon to configure your preferences.

​

Feature list with icons

<icon name="CheckCircle" size="20" /> Fast performance

<icon name="Shield" size="20" /> Enterprise security

<icon name="Zap" size="20" /> Real-time updates

​

Heading with icon

## <icon name="Rocket" size="24" /> Getting started

Let's begin your journey with our platform.

​

Status indicators

<icon name="CheckCircle" size="18" /> Task completed

<icon name="Clock" size="18" /> Task in progress

<icon name="XCircle" size="18" /> Task failed

​

Available icons

• Common: FileText, File, Folder, Home, Search, Menu
• Actions: Edit, Trash, Copy, Download, Upload, Save
• Status: CheckCircle, XCircle, AlertCircle, Info, HelpCircle
• Arrows: ArrowRight, ArrowLeft, ArrowUp, ArrowDown, ChevronRight
• Media: Play, Pause, Stop, Volume, Image, Video
• Social: Github, Twitter, Linkedin, Mail, Phone
• UI: Settings, User, Users, Bell, Calendar, Clock
• Shapes: Star, Heart, Square, Circle, Triangle

​

Editing in the editor

• Change the icon name
• Adjust the icon size
• Preview the selected icon

​

TypeScript types

interface IconAttrs {
  name: string;    // Lucide icon name
  size: number;    // Size in pixels
}

// Icon is resolved using the resolveInlineIcon function
function resolveInlineIcon(
  name: string,
  options: {
    size: number;
    showIcon: boolean;
    fallbackIcon: string;
  }
): JSX.Element;

​

Styling

• Use the theme’s muted foreground color by default
• Change to foreground color on hover (when editable)
• Align vertically with surrounding text
• Maintain aspect ratio when resized

​

Best practices

1. Use consistent sizing: Stick to standard sizes (16, 20, 24, 32) for visual consistency
2. Match text size: Icon size should generally match or slightly exceed surrounding text size
3. Choose semantic icons: Use icons that clearly communicate their meaning
4. Don’t overuse: Too many icons can make content cluttered and hard to scan
5. Test accessibility: Ensure icons supplement text rather than replace it

​

Common size guidelines