---
title: "Bundling TinyMCE icon packs using module loading"
description: "Information on bundling TinyMCE icon packs using module loading"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/bundling-icons/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/bundling-icons/index.md"
version: "latest"
last_updated: "2025-12-10T03:38:03Z"
tokens: 1272
---
# Bundling TinyMCE icon packs using module loading

## Overview

Icon packs provide visual styling for TinyMCE’s toolbar buttons, menu items, and contextual toolbars. When bundling TinyMCE with a module loader, icon packs can be included to customize the editor’s appearance.

TinyMCE includes both community and premium icon packs:

- **Community icon packs**: Available with all TinyMCE installations
- **Premium icon packs**: Available with paid TinyMCE subscriptions

The default icon pack is always required and provides the base set of icons. Additional icon packs can be bundled to extend or replace the default icons.

## File structure

This section shows the files required for each TinyMCE icon pack. The file paths shown are relative to the root TinyMCE package directory, where `tinymce.min.js` is stored. For example:

```
./
├── icons/
├── langs/
├── license.txt
├── models/
├── plugins/
├── readme.txt
├── skins/
├── themes/
├── tinymce.d.ts
├── tinymce.js
├── tinymce.min.js
└── version.txt
```

## Bundling syntax examples

The following examples show how to bundle icon packs using different module syntaxes. The examples use the `material` icon pack, but the same syntax applies to all available icon packs.

**Module Syntax:** ES6+ · **Source:** npm (community)

**Example:**

```js
import 'tinymce/icons/material';
```
**Module Syntax:** ES6+ · **Source:** npm (premium)

**Example:**

```js
import 'tinymce-premium/icons/material';
```
**Module Syntax:** ES6+ · **Source:** `.zip`

**Example:**

```js
import '../tinymce/icons/material/icons';
```
**Module Syntax:** Common JS · **Source:** npm (community)

**Example:**

```js
require('tinymce/icons/material');
```
**Module Syntax:** Common JS · **Source:** npm (premium)

**Example:**

```js
require('tinymce-premium/icons/material');
```
**Module Syntax:** Common JS · **Source:** `.zip`

**Example:**

```js
require('../tinymce/icons/material/icons.js');
```

## Premium icon packs from `tinymce-premium` (NPM)

The `tinymce-premium` NPM package ships all premium icon packs in `tinymce-premium/icons/`. Choose one of the following patterns depending on how TinyMCE is deployed:

**Bundling (recommended for modern build tools)**

- Import the required icon pack so the module bundler adds it to the application bundle. For example:

```js
import 'tinymce/icons/default';  // Always required
import 'tinymce-premium/icons/material';
// ... other TinyMCE imports
```
- After bundling, set `icons: 'material'` (or any imported icon pack) in the editor configuration.

### Non-bundling methods

**Non-bundling with file layering**

- When hosting directly from `node_modules`, copy `node_modules/tinymce-premium/icons/` into `node_modules/tinymce/icons/` as part of the build or deployment step (for example, in a `postinstall` script).
- Once copied, premium icon packs live beside the core files, so setting `icons` works without extra configuration.

**Non-bundling with `icons_url`**

- Leave the premium icon packs in `node_modules/tinymce-premium/icons/` and configure [`icons_url`](../editor-icons/#icons_url) to point at the required icon pack file.
- This approach avoids moving files and is useful when the `node_modules` directory is web-accessible (or when copying only the specific icon pack to a public folder).

## Available icon packs

## Community icon packs

These icon packs are available with all TinyMCE installations:

Default icons
```
./icons/default/icons.js
```
The default icon pack is always required and provides the base set of icons for all TinyMCE functionality.

## Premium icon packs

These icon packs are available with paid TinyMCE subscriptions. For more information, see: [Enhanced Skins & Icon Packs](../enhanced-skins-and-icon-packs/).

Bootstrap icons
```
./icons/bootstrap/icons.js
```
Bootstrap-style icons that complement the Bootstrap skin and other modern interfaces.

Jam icons
```
./icons/jam/icons.js
```
Clean, minimal icons from the JAM icon library, ideal for modern web applications.

Material icons
```
./icons/material/icons.js
```
Material Design icons that work well with Material Design-inspired skins.

Small icons
```
./icons/small/icons.js
```
Compact icons designed for smaller toolbar buttons and space-constrained interfaces.

Thin icons
```
./icons/thin/icons.js
```
Thin, lightweight icons with minimal visual weight, perfect for clean, modern designs.

## Usage in editor configuration

After bundling an icon pack, configure the editor to use it by setting the `icons` option:

```js
tinymce.init({
  selector: 'textarea',
  icons: 'material',  // Use the bundled material icon pack
  plugins: [
    "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
    "help", "image", "insertdatetime", "link", "lists", "media",
    "preview", "searchreplace", "table", "visualblocks",
  ],
  toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
});
```

## Troubleshooting

**Icons not displaying**: Ensure the icon pack is properly bundled and the `icons` option matches the bundled pack name.

**Missing icons**: The default icon pack is always required. Additional icon packs extend or replace default icons but do not provide all necessary icons on their own.

**Build errors**: Verify that the icon pack path is correct and the pack exists in your TinyMCE installation.