Enhanced Skins & Icon Packs

The Enhanced Skins & Icon Packs lets you quickly give TinyMCE a new look. Just choose one of our pre-made skins and icon packs.

How to use a Enhanced skins

Enhanced skins are only available with a paid TinyMCE subscriptions.

Use the skin option, in combination with the content_css option and the values listed below.

Available values for skins:

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

Available values for content_css:

material-classic
material-outline
fabric
fluent

Example: using a Enhanced skin

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  skin: 'fabric',        // Name of the skin
  content_css: 'fabric'  // Name of the content skin
});

How to use an icon pack

Use the icons option with any of the values listed below.

Available values for icon packs:

bootstrap
material
small
jam
thin

Example: using a premium icon pack

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  icons: 'material'      // Name of icon pack
});

For information on using the icons option, see: User interface options - icons.

Icon pack compatibility matrix

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

Skin	Compatible Icon pack
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 pack

material-classic