---
title: "Enhanced Skins & 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/7/enhanced-skins-and-icon-packs/index.md"
version: "7"
last_updated: "2026-06-15T05:48:07Z"
tokens: 744
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/enhanced-skins-and-icon-packs/).
# 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

> **Note:** Enhanced skins are only available with a [paid TinyMCE subscriptions](/pricing/).
Use the [skin](../editor-skin/#skin) option, in combination with the [content_css](../add-css-options/#content_css) option and the values listed below.

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

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

Available values for [content_css](../add-css-options/#content_css):

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

### Example: using a Enhanced 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-icons/#icons) option with any of the values listed below.

Available values for [icon](../editor-icons/#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-icons/#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/)