Bundling TinyMCE icon packs using module loading

Overview

Icon packs provide visual styling for TinyMCE’s toolbar buttons, menu items, and contextual toolbars. When bundling TinyMCE with a module loader, icon packs can be included to customize the editor’s appearance.

TinyMCE includes both community and premium icon packs:

  • Community icon packs: Available with all TinyMCE installations

  • Premium icon packs: Available with paid TinyMCE subscriptions

The default icon pack is always required and provides the base set of icons. Additional icon packs can be bundled to extend or replace the default icons.

Overview

This section shows the files required for each TinyMCE icon pack. The file paths shown are relative to the root TinyMCE package directory, where tinymce.min.js is stored. For example:

./
├── icons/
├── langs/
├── license.txt
├── models/
├── plugins/
├── readme.txt
├── skins/
├── themes/
├── tinymce.d.ts
├── tinymce.js
├── tinymce.min.js
└── version.txt

Bundling syntax examples

The following examples show how to bundle icon packs using different module syntaxes. The examples use the material icon pack, but the same syntax applies to all available icon packs.

Module Syntax Source Example

ES6+

npm

 
import 'tinymce/icons/material';

.zip

 
import '../tinymce/icons/material/icons';

Common JS

npm

 
require('tinymce/icons/material');

.zip

 
require('../tinymce/icons/material/icons.js');

Available icon packs

Community icon packs

These icon packs are available with all TinyMCE installations:

Default icons
./icons/default/icons.js

The default icon pack is always required and provides the base set of icons for all TinyMCE functionality.

Premium icon packs

These icon packs are available with paid TinyMCE subscriptions. For more information, see: Enhanced Skins & Icon Packs.

Bootstrap icons
./icons/bootstrap/icons.js

Bootstrap-style icons that complement the Bootstrap skin and other modern interfaces.

Jam icons
./icons/jam/icons.js

Clean, minimal icons from the JAM icon library, ideal for modern web applications.

Material icons
./icons/material/icons.js

Material Design icons that work well with Material Design-inspired skins.

Small icons
./icons/small/icons.js

Compact icons designed for smaller toolbar buttons and space-constrained interfaces.

Thin icons
./icons/thin/icons.js

Thin, lightweight icons with minimal visual weight, perfect for clean, modern designs.

Usage in editor configuration

After bundling an icon pack, configure the editor to use it by setting the icons option:

tinymce.init({
  selector: 'textarea',
  icons: 'material',  // Use the bundled material icon pack
  plugins: [
    "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
    "help", "image", "insertdatetime", "link", "lists", "media",
    "preview", "searchreplace", "table", "visualblocks",
  ],
  toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
});

Troubleshooting

Icons not displaying: Ensure the icon pack is properly bundled and the icons option matches the bundled pack name.

Missing icons: The default icon pack is always required. Additional icon packs extend or replace default icons but do not provide all necessary icons on their own.

Build errors: Verify that the icon pack path is correct and the pack exists in your TinyMCE installation.