---
title: "Enhanced Skins & Icon Packs"
description: "Premium skins and icon packs for TinyMCE."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/enhanced-skins-and-icon-packs/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/enhanced-skins-and-icon-packs/index.md"
version: "latest"
last_updated: "2025-12-10T03:38:03Z"
tokens: 939
---
# Enhanced Skins & Icon Packs

> **Note:** Enhanced skins are only available with a [paid TinyMCE subscription](/pricing/).
The Enhanced Skins & Icon Packs provide pre-made skins and icon packs to quickly customize TinyMCE’s appearance. These premium options allow integrators to match TinyMCE to their application’s design system.

## Available premium skins

The following premium skins are available for TinyMCE:

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

For information on configuring skins, see: [Skin options](../editor-skin/).

Skins can include both UI styles (`skin.css`) and content styles (`content.css`). Using the `skin` option applies both automatically when both files are present.

For styling only the editable area (without changing the UI), separate content-only CSS files are available. These files are located in the content folder and may differ from the content styles included with skins. Available content-only options:

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

Use the [`content_css`](../add-css-options/#content_css) option to apply content-only styles.

### Example: using a premium skin

```js
tinymce.init({
  selector: 'textarea',
  skin: 'fabric'  // Applies both UI and content styles (if both files are included)
});
```

> **Note:** The `skin` option requires the skin files to be in the default location (`TINYMCE_BASE/skins/ui/${skinName}`). For custom locations or when using NPM packages without bundling, refer to [Skin options](../editor-skin/) for more information.

> **Note:** **Mixing skins and content_css:**
> 
> The `content_css` option is not required when using skins that include content styles. However, if both `skin` and `content_css` are specified, `content_css` will override the skin’s content styles, allowing mixing and matching of UI and content styles.

## Available premium icon packs

The following premium icon packs are available for TinyMCE:

- `bootstrap`
- `material`
- `small`
- `jam`
- `thin`

For information on configuring icon packs, see: [Icon options](../editor-icons/).

### Example: using a premium icon pack

```js
tinymce.init({
  selector: 'textarea',
  icons: 'material'      // Name of icon pack
});
```

> **Note:** The `icons` option requires the icon pack files to be in the default location (`TINYMCE_BASE/icons/${iconPackName}/icons.js`). For custom locations or when using NPM packages without bundling, refer to [Icon options](../editor-icons/) for more information.

## Icon pack compatibility matrix

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

| Skin | Compatible Icon packs |
| --- | --- |
| 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 interactive demos showing 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/)
- [Custom Icon Pack Demo](../custom-icon-pack-demo/)