Enhanced Skins & Icon Packs

Enhanced skins are only available with a paid TinyMCE subscription.

The Enhanced Skins & Icon Packs provide pre-made skins and icon packs to quickly customize TinyMCE’s appearance. These premium options allow integrators to match TinyMCE to their application’s design system.

Available premium skins

The following premium skins are available for TinyMCE:

material-classic
material-outline
bootstrap
fabric
fluent
borderless
small
jam
naked
outside
snow

For information on configuring skins, see: Skin options.

Skins can include both UI styles (skin.css) and content styles (content.css). Using the skin option applies both automatically when both files are present.

For styling only the editable area (without changing the UI), separate content-only CSS files are available. These files are located in the content folder and may differ from the content styles included with skins. Available content-only options:

material-classic
material-outline
fabric
fluent

Use the content_css option to apply content-only styles.

Example: using a premium skin

tinymce.init({
  selector: 'textarea',
  skin: 'fabric'  // Applies both UI and content styles (if both files are included)
});

The skin option requires the skin files to be in the default location (TINYMCE_BASE/skins/ui/${skinName}). For custom locations or when using NPM packages without bundling, refer to Skin options for more information.

Mixing skins and content_css:

The content_css option is not required when using skins that include content styles. However, if both skin and content_css are specified, content_css will override the skin’s content styles, allowing mixing and matching of UI and content styles.

Available premium icon packs

The following premium icon packs are available for TinyMCE:

bootstrap
material
small
jam
thin

For information on configuring icon packs, see: Icon options.

Example: using a premium icon pack

tinymce.init({
  selector: 'textarea',
  icons: 'material'      // Name of icon pack
});

The icons option requires the icon pack files to be in the default location (TINYMCE_BASE/icons/${iconPackName}/icons.js). For custom locations or when using NPM packages without bundling, refer to Icon options for more information.

Icon pack compatibility matrix

Due to different toolbar button sizes, some icon packs fit better with some skins. Use the compatibility matrix below as a guide when selecting combinations.

Skin	Compatible Icon packs
material-classic	bootstrap, material, jam, small, thin
material-outline	bootstrap, material, jam, small, thin
bootstrap	bootstrap, material, jam, small, thin
fabric	bootstrap, material, jam, small, thin
fluent	bootstrap, material, jam, small, thin
borderless	bootstrap, material, jam, small, thin
naked	bootstrap, material, jam, small, thin
outside	bootstrap, material, jam, small, thin
snow	bootstrap, material, jam, small, thin
small	jam, small
jam	jam, small

Skin

Compatible Icon packs

material-classic