---
title: "Getting started with Icomoon"
date: "2017-12-06T13:20:04+00:00"
summary: "Learn how to set up Icomoon icon fonts in Site Studio with our step-by-step guide. Create custom icon libraries, prepare files, and integrate them seamlessly into your web projects."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/getting-started-icomoon"
id: "d32887cd-bcdc-4182-b3bd-125db5312784"
---

Icomoon is an icon font library that can be used with Site Studio. This guide provides information on how to correctly prepare your Icomoon font library ready for adding into Site Studio. Find more information on [setting up your icon font libraries](/drupal-starter-kits/add-ons/site-studio/set-icon-font-libraries "Set-up icon font libraries").

Important

For more specific information on Icomoon, please refer to the [official Icomoon documentation](https://icomoon.io/docs.html).

Important

You can only upload one Icomoon icon font, which must be using Icomoon as the font family. It is on our roadmap to allow multiple Icomoon icon fonts.

Preparing Icomoon icon font libraries for Site Studio
-----------------------------------------------------

To get started with your icon font library:

### Step 1 - Create an Icomoon account

You will require an Icomoon account in order to configure your icon font library. Visit the [signup page](https://icomoon.io/#signup) to create an account, or log in to an existing account.

### Step 2 - Create a new project

1.  Start the Icomoon app by clicking the **Icomoon App** button on the homepage
2.  Navigate to the Projects screen by clicking on the menu then selecting **Manage projects**. Alternatively, you can visit the [projects URL directly](https://icomoon.io/app/#/projects) while logged in.

![b5d6bedb-icomoon-create-new-project.gif](https://acquia.widen.net/content/587571ac-42aa-428a-a884-9797854efe3d/web/b5d6bedb-icomoon-create-new-project.gif?animate=true)

### Step 3 - Configure your icon font library

1.  On the project screen click **Load** to the right of your project
2.  Click **Add icons from font library** and select the library you require
3.  Select the icons in the set that you would like to include in your font library
4.  Click **Generate font** at the bottom of the page.

Important

There are many different options, both paid and free. In this example the _Icomoon - Free_ set has been selected.

![532b48b2-icomoon-configure-icon-fonts.gif](https://acquia.widen.net/content/5921ee1d-2481-4a3d-b86b-ad0121e01f9b/web/532b48b2-icomoon-configure-icon-fonts.gif?animate=true)

You can also choose to import custom icons into your library. These must be .svg files. To import icons, click the **Import icons** button and select them from your local drive.

![cd07618d-icomoon-import-icons.png](https://acquia.widen.net/content/e88c7389-eeaa-4137-a2a4-d1f21e449860/web/cd07618d-icomoon-import-icons.png)

### Step 4 - Download the icon font and JSON files

To download the JSON file and icon font files:

1.  Navigate to the Projects screen
2.  Click **Load** to the right of the project
3.  Click **Generate font** at the bottom right of the screen
4.  Click **Download** at the bottom right of the screen
5.  This will provide you with a .zip file

![d917308d-download-font-file.gif](https://acquia.widen.net/content/f2772eb8-1844-4310-8edf-cd24f9194480/web/d917308d-download-font-file.gif?animate=true)

### Step 5 - Unzip and extract the icon font and JSON files

Once you've downloaded the .zip file from Icomoon

1.  Unzip the file to extract the **Fonts** and the **JSON** (shown below)
2.  Create a new .zip file of just the Fonts folder. This is what you'll upload to Site Studio
3.  The **selection.json** file is the JSON you'll upload to Site Studio.

![ef8b86b8-Icomoon-download.png](https://acquia.widen.net/content/80010e68-4723-4530-8432-c22e6c6c3886/web/ef8b86b8-Icomoon-download.png)