Skip to content
Submit a Ticket(opens in a new tab)

Icon Manager

Icon Manager is another exclusive feature available in the Kata theme. It allows you to add unlimited icons to the theme. This article will lay down how exactly you can do that:

Our main goal with Kata is to have everything you need in one place, ready to go. So with that in mind, navigate to the editing page for the demo to use Icon Manager.

Kata Icon Box widget settings with the icon selector in Elementor

So let’s assume you want to change the icon displayed on this page and use your custom icon. Follow these simple steps:

Kata Icon Box widget with numbered steps to open the Select Icon dialog

1- First we set the Icon Source on Kata Icons.
2- Next click on Choose.
3- Click Add Icon Set on the newly opened window.

Kata Icon Manager dialog with an arrow pointing to the New Pack button

Kata Icon Manager dialog with an arrow pointing to the Kata Icon Pack name field

Kata Icon Manager Select Icon dialog with an arrow pointing to the drop files area

4- Click on New Pack.
5- Select a name for your new icon pack and click “Next.”
6- Choose the icons you want by clicking the “Select Files” button or by dragging and dropping them.

You can upload one or more icons to include in your pack for future use.

To download SVG icons you need to do the following:

1- First, log into your account on icomoon.io and open the IcoMoon App.

IcoMoon homepage Personalize your designs with the IcoMoon App button highlighted

  1. Select or upload the icons you want to download.
  2. Click Generate SVG & More at the bottom of the page.

IcoMoon free icon library with Generate SVG and Generate Font buttons highlighted

4- In the new screen, click Download to save your icons as SVG files in a zipped folder. Your SVG icons are now ready for use.

IcoMoon generated font preview with icons and an arrow pointing to the download button

It is also possible to select, edit, and download icons individually. To do this you need to do the following

1- In the IcoMoon App, Click the Edit button (pencil icon).

IcoMoon free icon library grid with an arrow pointing to the toolbar

2- select the icon you want to edit by clicking it to open the icon editor.
3- Make any adjustments, such as resizing, mirroring, or rotating the icon.
4- To download the edited icon individually, click Download SVG in the editor.

This lets you customize and download icons one at a time.

IcoMoon icon editor showing a shopping cart icon with edit options

We have uploaded several SVG icons here to illustrate our point.

Kata Icon Manager Select Icon dialog with uploaded icon pack highlighted

You can place your uploaded icons on the page by simply clicking on the icon.
As you can see, our newly added icon set has been added to the main icon pack.

Kata Icon Manager Select Icon dialog with an icon set and an arrow pointing to the add icon set link

This window allows you to either edit or add an icon pack.

Kata Icon Manager Select Icon dialog with an upload field circled

You can also download an icon pack from icomoon.io, rename its JSON file to selection.json, and upload it here to load all its icons. Here’s how to do it:

1- Click on the IcoMoon App in the top menu.

IcoMoon homepage Personalize your designs with the IcoMoon App button highlighted

2- Select your desired icons, then click on Download JSON from the icon in the upper right corner.

IcoMoon free icon library grid with selected icons for download

Kata Icon Manager Select Icon dialog with uploaded custom icons in an Elementor icon box

This is the quickest way to access new icons in the Icon Manager.

Last updated: