The Icon Manager is the central place for every icon on your site. Alongside Divi's built-in Divi Icons and Font Awesome sets, you can import your own SVG icons and icon fonts, group them into collections, choose which collections appear when you pick an icon, and share collections between sites.
It works together with a new, more compact icon picker that replaces the old one in every module that uses icons.
Where you'll find the new icon picker
The icon picker appears wherever a module lets you choose an icon, including the Icon, Blurb, Icon List, Accordion, Timeline, Image, Gallery, Portfolio, Blog, Menu, Group Carousel, Fullwidth Header, and Fullwidth Image modules. It also powers the icon setting of every Button.
Instead of a large grid that takes over the settings panel, the setting now shows a small preview of the selected icon. Hover over the preview to see the icon's name and the collection it comes from.
Choose an icon with the icon picker
Open the settings of a module that uses an icon, such as the Icon module.
Click the icon preview. If no icon is set yet, click the Plus icon instead.
Use the dropdown at the top to choose which collection to browse, or type in the Search Icons... field to find an icon by name.
Click an icon to apply it. The menu closes on its own.
The collection dropdown groups your options:
All Collections - Shows every icon from every collection that's turned on.
Theme Icons - Divi's built-in collections, Divi Icons and Font Awesome.
Custom Icons - The collections you've created or imported.
Styles - Filters the built-in icons by style, such as Solid Icons or Line Icons.
When you open the picker, it starts on the collection that holds the icon you've already selected. If no icon is selected, it starts on your default collection (see Set a default collection below).
Pro tip: You can move around the icon grid with the arrow keys, and press Home or End to jump to the first or last icon.
To manage your icons, click the Icon Manager button at the bottom of the picker menu.
Get to know the Icon Manager
The Icon Manager opens in its own window, which you can drag, resize, and expand like other Divi windows. It contains:
Search icons... - Searches every collection at once, by icon name, search terms, or collection name. Collections with matching icons open automatically.
New Collection - Creates an empty collection.
Import Icons - Adds SVG files or an icon font to a collection.
Import & Export Icon Collections - The import/export icon in the window header, for moving collections between sites.
Collections - Each collection is listed by name. Click a name to expand it and see its icons. Collections with many icons show a Show More button at the bottom.
Every site starts with two built-in collections, Divi Icons and Font Awesome. Some plugins also add their own icon sets. These appear as extra collections you can browse and use but can't edit.
Create a collection
Click New Collection.
Type a name in the Collection name field.
Click Create.
The new collection is empty. Fill it by importing icons into it, or by moving icons into it from another collection.
Import your own icons
You can import two kinds of icon files:
SVG files - One or more individual SVG icons.
An icon font - A single WOFF2, WOFF, TTF, or OTF font file. Divi adds every icon in the font.
You can import either SVGs or one font at a time, not both together. ZIP files aren't supported, so unzip an icon pack before importing it.
Click Import Icons. The Add Icons window opens.
Under Icon File(s), click Choose Icon Files and select your files. If you chose SVGs, you can click Add More SVGs to add more files to the same import.
If you're importing a font, you can also add a Name Mapping File (optional, see below).
Use the Collection dropdown to choose where the icons go. Pick an existing collection, or leave it on New Collection and type a name in the Collection Name field.
Click Import. A progress bar shows the upload, then the icons appear in the collection.
If a collection is expanded when you click Import Icons, Divi picks that collection for you.
Imported files are saved to your WordPress Media Library.
SVG files are cleaned of anything unsafe as they're uploaded. You don't need a separate plugin to allow SVG or font uploads for the Icon Manager, unlike other SVG uploads described in How to Upload SVG and JSON Files. Each SVG icon is named after its file, and the maximum file size is set by your site's upload limit.
Note: SVG icons take on the icon color you set in the module, just like font icons. Multi-colored SVGs are shown in a single color.
Manage icons in a collection
Click an icon to select it. To select several icons in the same collection, hold Shift, Cmd (Mac), or Ctrl (Windows) while you click. Click a selected icon again to deselect it.
When icons are selected, these buttons appear next to the collection name. You can also right-click any icon to see the same options:
Insert - Applies the icon to the setting you opened the Icon Manager from, then closes the Icon Manager. This appears only when exactly one icon is selected and you opened the Icon Manager from an icon picker.
Remove - Removes the selected icons from this collection.
Move - Moves the selected icons to another collection you pick from the list.
Manage a collection
Expand a collection with no icons selected to see its management buttons:
Rename - Changes the collection's name. Type the new name and click Save.
Reset - Brings back icons you've removed from the collection. It doesn't remove anything you've added.
Make Default - Makes this the collection the icon picker opens on. The default collection's button reads Default.
Delete - Deletes the collection. This appears only on collections you've created. Divi Icons and Font Awesome can't be deleted.
Each collection also has a toggle switch. Turn it off to hide that collection from icon pickers across your site, which keeps the picker focused on the icons you actually use. You can't make a hidden collection the default.
Set a default collection
If you mostly use one set of icons, such as your brand's icon font, make it the default:
Expand the collection in the Icon Manager.
Click Make Default.
From now on, the icon picker opens on that collection whenever the setting doesn't already have an icon from another collection.
What happens to icons already on your pages
Removing icons, hiding a collection, or deleting a collection never breaks your existing designs:
Icons you've already used on pages keep displaying, even if you remove them from a collection or hide or delete their collection.
Removing icons or deleting a collection only removes them from the Icon Manager. The original files stay in your Media Library.
Divi asks you to confirm before it removes icons or deletes a collection.
Import and export icon collections
You can export your collections and import them on another site, which is handy for reusing a brand's icons across client sites.
Export collections
In the Icon Manager, click the Import & Export Icon Collections icon in the window header.
On the Export tab, use Collections to choose which collections to include. All collections are selected by default.
Export the file. The icon files themselves are included, so the collections work on the new site without any other downloads.
Import collections
Open the same window and switch to the Import tab.
Choose the exported icon collection file and import it.
Imported collections are added alongside the collections already on the site. Nothing existing is removed.
Who can manage icons
Anyone who can edit pages can browse collections in the Icon Manager and insert icons. Creating, importing, renaming, moving, removing, and deleting icons and collections requires an Administrator, or another role that can manage theme options and upload files. Importing and exporting collections also requires access to Divi's portability (import and export) features in the Role Editor.
Things to know
The Icon Manager is site-wide. Changes you make to a collection apply everywhere on your site, not just the page you're editing.
If two people change icons at the same time, Divi may ask you to reload the library. Click Reload Library to see the latest version and try again.