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
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 |
Examples
Below are some recommended combinations of skins and icon packs:
- Bootstrap skin
- Material Outline skin with Material icon pack
- Material Classic skin with Material icon pack
- Microsoft Fabric skin
- Microsoft Fluent skin
- Small skin with Small icon pack
- Small skin with Jam icon pack
- Borderless editor
- Naked editor
- Outside editor
- Snow editor
Getting started with TinyMCE Tiny Skins and Icon
Creating an account
Try the Tiny Skins and Icon Packs and the Tiny Cloud with a free Tiny Account. New accounts receive a 14-day trial of the Tiny premium plugins, skins, and icon packs; with no credit card information or commitment required.
Get TinyMCE Tiny Skins and Icon
The Tiny Skins and Icon Packs are included in the following Tiny Cloud plans:
A 14-day free trial is also available for the Tiny Cloud Essential Plan and the Tiny Cloud Professional Plan.
Further information
For information on:
- Tiny Cloud plans, see: Tiny Pricing Plans.
- Enabling premium skins, see: The
skin
setting. - Enabling premium icon packs, see: The
icons
setting.
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.