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