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.

File structure

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 (community)

 
import 'tinymce/icons/material';

npm (premium)

 
import 'tinymce-premium/icons/material';

.zip

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

Common JS

npm (community)

 
require('tinymce/icons/material');

npm (premium)

 
require('tinymce-premium/icons/material');

.zip

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

Premium icon packs from tinymce-premium (NPM)

The tinymce-premium NPM package ships all premium icon packs in tinymce-premium/icons/. Choose one of the following patterns depending on how TinyMCE is deployed:

Bundling (recommended for modern build tools)

  • Import the required icon pack so the module bundler adds it to the application bundle. For example:

    import 'tinymce/icons/default';  // Always required
import 'tinymce-premium/icons/material';
// ... other TinyMCE imports

  • After bundling, set icons: 'material' (or any imported icon pack) in the editor configuration.

Non-bundling methods

Non-bundling with file layering

  • When hosting directly from node_modules, copy node_modules/tinymce-premium/icons/ into node_modules/tinymce/icons/ as part of the build or deployment step (for example, in a postinstall script).

  • Once copied, premium icon packs live beside the core files, so setting icons works without extra configuration.

Non-bundling with icons_url

  • Leave the premium icon packs in node_modules/tinymce-premium/icons/ and configure icons_url to point at the required icon pack file.

  • This approach avoids moving files and is useful when the node_modules directory is web-accessible (or when copying only the specific icon pack to a public folder).

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.