Tiny Skins and Icon Packs

The Tiny Skins and 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 premium skin

premium 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 premium 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