QuillKit - Icon Support Demo

⚠️ API Key Required: QuillKit requires a valid API key to function. This demo uses a demo API key. For your own projects, you'll need to obtain an API key from the QuillKit service.

Insert Bootstrap Icons, Font Awesome Icons, and Custom Icons into your documents

Editor with All Icon Types

This editor supports:

Bootstrap Icons - Popular icon library with 1,800+ icons
Font Awesome - World's most popular icon toolkit with 30,000+ icons
Custom Icons - Your own icon URLs (images)

Click the ⭐ icon button in the toolbar to browse and insert icons!

Editor with Bootstrap Icons Only

This editor is configured to show only Bootstrap Icons.

Editor with Font Awesome Only

This editor is configured to show only Font Awesome Icons.

Editor with Custom Icons

This editor is configured with custom icon URLs (emoji images as an example).

How to Use Icons

To enable icon support in your editor:

const editor = new QuillKit('#my-editor', {
  icons: {
    enabled: true,          // Enable icon support (default: true)
    bootstrap: true,        // Enable Bootstrap Icons (default: true)
    fontAwesome: true,      // Enable Font Awesome (default: true)
    customIcons: [          // Custom icon URLs
      {
        name: 'My Icon',
        url: 'https://example.com/icon.png'
      }
    ]
  }
});

CDN Requirements

To use Bootstrap Icons and Font Awesome, include their CDN links in your HTML:

<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">