---
title: "TinyMCE Icon options"
description: "Configure the editor's toolbar button and menu item icons."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/editor-icons/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/editor-icons/index.md"
version: "7"
last_updated: "2022-11-30T01:26:11Z"
tokens: 637
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/editor-icons/).
# TinyMCE Icon options

There are two options for replacing the icons in TinyMCE: `icons` and `icons_url`. Tiny recommends using the `icons` option for icon packs bundled with the product or included in your cloud subscription. Custom or third-party icons should be included using the `icons_url` option to simplify updating and upgrading TinyMCE.

## `icons`

The **icons** option allows the editor icons to be extended or replaced using an icon pack. For information on creating icon packs, see: [Create an icon pack for TinyMCE](../creating-an-icon-pack/).

**Type:** `String`

On initialization, TinyMCE will try to load any icon pack specified by the **icons** option. The icons in the icon pack will be merged with [TinyMCE’s default icons](../editor-icon-identifiers/) and icons in the icon pack will overwrite the default icons with the same identifier.

TinyMCE loads icon packs from the path `TINYMCE_BASE/icons/${iconPackName}/icons.js`; where:

- `TINYMCE_BASE` is the TinyMCE root directory (the directory containing `tinymce.min.js`).
- `${iconPackName}` is the name of the icon pack.

To use a TinyMCE icon pack:

1. If required, create a new `icons` directory in `TINYMCE_BASE`.
2. Copy the icon pack into the `icons` directory.
3. Add the `icons` option to `tinymce.init`.

### Example: using `icons`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  icons: 'material'  // TINYMCE_BASE/icons/material/icons.js
});
```

## `icons_url`

The **icons_url** option allows the editor icons to be extended or replaced using an icon pack. For information on creating icon packs, see: [Create an icon pack for TinyMCE](../creating-an-icon-pack/).

On initialization, TinyMCE will try to load any icon pack specified by the **icons_url** option. The icons in the icon pack will be merged with [TinyMCE’s default icons](../editor-icon-identifiers/) and icons in the icon pack will overwrite the default icons with the same identifier.

`icons_url` is used to specify the location of an icon pack when TinyMCE and the icon pack are loaded from different locations. For example: When loading TinyMCE from Tiny Cloud, the icon pack can be loaded from a different web server.

**Type:** `String`

### Example: using `icons_url`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  icons_url: 'https://www.example.com/icons/material/icons.js', // load icon pack
  icons: 'material'  // use icon pack
});
```