TinyMCE Icon options

There are two options for replacing the icons in TinyMCE: icons and icons_url. Tiny recommends using the icons option for icon packs bundled with the product or included in your cloud subscription. Custom or third-party icons should be included using the icons_url option to simplify updating and upgrading TinyMCE.

icons

The icons option allows the editor icons to be extended or replaced using an icon pack. For information on creating icon packs, see: Create an icon pack for TinyMCE.

Type: String

On initialization, TinyMCE will try to load any icon pack specified by the icons option. The icons in the icon pack will be merged with TinyMCE’s default icons and icons in the icon pack will overwrite the default icons with the same identifier.

TinyMCE loads icon packs from the path TINYMCE_BASE/icons/${iconPackName}/icons.js; where:

  • TINYMCE_BASE is the TinyMCE root directory (the directory containing tinymce.min.js).

  • ${iconPackName} is the name of the icon pack.

Available icon packs

TinyMCE includes both community and premium icon packs:

  • Community: default (always required)

  • Premium: bootstrap, jam, material, small, thin (available with paid subscriptions)

For information on creating custom icon packs, see: Create an icon pack for TinyMCE.

Usage

To use a TinyMCE icon pack:

  1. If required, create a new icons directory in TINYMCE_BASE.

  2. Copy the icon pack into the icons directory.

  3. Add the icons option to tinymce.init.

Example: using premium icon packs

tinymce.init({
  selector: 'textarea',
  icons: 'material',  // Use Material Design icons
  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",
});

Example: using multiple icon packs

tinymce.init({
  selector: 'textarea',
  icons: 'bootstrap',  // Use Bootstrap icons
  skin: 'bootstrap',   // Match with Bootstrap skin
  content_css: 'bootstrap',  // Use Bootstrap content styling
});

icons_url

The icons_url option allows the editor icons to be extended or replaced using an icon pack. For information on creating icon packs, see: Create an icon pack for TinyMCE.

On initialization, TinyMCE will try to load any icon pack specified by the icons_url option. The icons in the icon pack will be merged with TinyMCE’s default icons and icons in the icon pack will overwrite the default icons with the same identifier.

icons_url is used to specify the location of an icon pack when TinyMCE and the icon pack are loaded from different locations. For example: When loading TinyMCE from Tiny Cloud, the icon pack can be loaded from a different web server.

Understanding icons_url and icons Together:

When using icons_url, you must also specify the icons option:

  • icons_url - Tells TinyMCE where to find the icon pack file.

  • icons - Tells TinyMCE which icon pack to use from the loaded file.

Example:

tinymce.init({
  selector: 'textarea',
  icons_url: 'dist/icons/my_icon_pack/icons.js', // Where to find it
  icons: 'my_icon_pack',  // Which pack to use
  // ... other options
});

The icons value must match the pack name defined in your package.json iconPackName field.

Usage

To use a TinyMCE icon pack from a separate location:

  1. Ensure the icon pack is available at the specified URL.

  2. Add the icons_url option to tinymce.init.

Type: String

Example: using icons_url

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  icons_url: 'https://www.example.com/icons/my_icon_pack/icons.js', // load icon pack from a different location
  icons: 'material', // use 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",
});