{"id":1818,"date":"2020-07-19T11:55:25","date_gmt":"2020-07-19T11:55:25","guid":{"rendered":"https:\/\/webnus.net\/kata\/documentation\/?p=1818"},"modified":"2024-11-11T13:31:34","modified_gmt":"2024-11-11T13:31:34","slug":"icon-manager","status":"publish","type":"post","link":"https:\/\/webnus.net\/kata\/documentation\/icon-manager\/","title":{"rendered":"Icon Manager"},"content":{"rendered":"\n

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:<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"Icon\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

So let\u2019s assume you want to change the icon displayed on this page and use your custom icon. Follow these simple steps:<\/p>\n\n\n\n

\"Icon\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

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.<\/p>\n\n\n

\n
\"Icon\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\n\n
\n
\"Icon\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\n\n\n
\"Icon\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

You can upload one or more icons to include in your pack for future use.<\/p>\n\n\n\n

Download SVG icons<\/h3>\n\n\n\n

To download SVG icons you need to do the following:<\/p>\n\n\n\n

1- First, log into your account on icomoon.io<\/a> and open the IcoMoon App<\/strong>.<\/p>\n\n\n\n

\"Icon\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
    \n
  1. Select or upload the icons you want to download.<\/li>\n\n\n\n
  2. Click Generate SVG & More<\/strong> at the bottom of the page.<\/li>\n<\/ol>\n\n\n\n
    \"Icon\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

    4- In the new screen, click Download<\/strong> to save your icons as SVG files in a zipped folder. Your SVG icons are now ready for use.<\/p>\n\n\n\n

    \"Icon\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

    It is also possible to select, edit, and download icons individually. To do this you need to do the following<\/p>\n\n\n\n

    1- In the IcoMoon App, Click the Edit button<\/strong> (pencil icon).<\/p>\n\n\n\n

    \"Icon\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

    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<\/strong> in the editor.<\/p>\n\n\n\n

    This lets you customize and download icons one at a time.<\/p>\n\n\n\n

    \"Icon\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

    <\/p>\n\n\n\n

    We have uploaded several SVG icons here to illustrate our point.<\/p>\n\n\n\n

      <\/ol>\n\n\n\n
      \"Icon\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

      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.<\/p>\n\n\n\n

      \"Icon\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

      This window allows you to either edit or add an icon pack.<\/p>\n\n\n\n

      \"Icon\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

      You can also download an icon pack from icomoon.io, rename its JSON file to selection.json<\/strong>, and upload it here to load all its icons. Here\u2019s how to do it:<\/p>\n\n\n\n

      1- Click on the IcoMoon App<\/strong> in the top menu.<\/p>\n\n\n\n

      \"Icon\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

      2- Select your desired icons, then click on Download JSON from the icon in the upper right corner.<\/p>\n\n\n\n

      \"Icon\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
      \"Icon\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

      This is the quickest way to access new icons in the Icon Manager.<\/p>\n\n\n\n