---
title: "Tiny Skins and Icon Packs"
description: "Quickly give TinyMCE a new look."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/enhanced-skins-and-icon-packs/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/enhanced-skins-and-icon-packs/index.md"
version: "5"
last_updated: "2026-06-15T08:52:18Z"
tokens: 724
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/enhanced-skins-and-icon-packs/).
# 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

Use the [skin](../editor-appearance/#skin) option, in combination with the [content_css](../content-appearance/#content_css) option and the values listed below.

Available values for [skins](../editor-appearance/#skin):

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

Available values for [content_css](../content-appearance/#content_css):

- material-classic
- material-outline
- fabric
- fluent

### Example: Using a premium skin

```js
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](../editor-appearance/#icons) option with any of the values listed below.

Available values for [icon](../editor-appearance/#icons) packs:

- bootstrap
- material
- small
- jam
- thin

### Example: Using a premium icon pack

```js
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`](../editor-appearance/#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](../bootstrap-demo/)
- [Material Outline skin with Material icon pack](../material-outline-demo/)
- [Material Classic skin with Material icon pack](../material-classic-demo/)
- [Microsoft Fabric skin](../fabric-demo/)
- [Microsoft Fluent skin](../fluent-demo/)
- [Small skin with Small icon pack](../small-demo/)
- [Small skin with Jam icon pack](../jam-demo/)
- [Borderless editor](../borderless-demo/)
- [Naked editor](../naked-demo/)
- [Outside editor](../outside-demo/)
- [Snow editor](../snow-demo/)