Introducing the Icon Library

This article explains what the Icon Library is and how to make use of it.

With the Icon Library, you acquire a dedicated library allowing you to group all of your icons. This way, you no longer have to mix icons and other asset types in your Media Library – ending up in an organizational hassle. With its icon-tailored features, the Icon Library helps you upload icons in different formats like SVG, PNG, and EPS and preview them on different backgrounds – also transparent ones.

Setting up the Icon Library

To set up the Icon Library, enter your brand space and switch to the Library tab. Then click on the ‘New’ button on top-right > Icon Library.

Give your Icon Library a name, and upload all of the preferred icons to the Library by clicking on the ‘Upload your icons’ button in the middle of your screen or hitting the ‘New’ button on top-right > File Upload.

In case you want to modify your Icon Library Settings, simply click the settings icon in the Power Bar to your left to change the project name, or attach the Icon Library to another brand.

To upload the SVGs to Icon Library, you must ensure they are correctly built.

Only then:

  • Icons will be appropriately colored in the front end of the Icon Library

  • PNG generated by Frontify will be correct and reflect the original SVG

  • Prerequisites for a correctly built SVG icon:

    • It must be a combined shape, not a group

    • It must be a single outline

Organizing your Icon Library

Once you’ve uploaded all your icons, you can organize them in folders and collections again by triggering the ‘New’ button on your top right.

Alternatively, you can (multi-)select your icons by hovering over the icon cards and ticking the box of the preferred icons in the top-left corner. A horizontal options bar will then appear on top of the screen.

You can move the selected icons to existing folders or collections and assign them to pre-existing tags. Or simply create new folders, collections, or tags.

Taking actions

By clicking the cogwheel in the icon card, you can view and change asset information like name, pixel ratio, and color space.

The three dots on the right of the cogwheel enable you to trigger actions like downloading the icon, replacing it, sharing it, and deleting it. In case you choose to share the icon, you can do so by sharing a public link. By clicking the share function, you can also embed the icon on other websites and wikis, for example.

Inviting team members is still done via the team icon in the Power Bar on your left-hand side.

You’ll also find the general Icon Library Settings on the Power Bar to your left. Click on the cogwheel icon > Usage Settings, where you can configure the available Icon library usage options to add another layer of security, such as:

  • Asset download protection

  • Download a request form,

  • Assign downloadable colors to your icons,

  • Determining different download sizes.

Note that a link to the colors defined in your Style Guide is made. We explain further the Usage Setting later in this article.

Individual Icons Settings

When you click on an icon individually, you’ll have the possibility to work on it collaboratively. Discover different ways to do so with the Power Bar on the left-hand side. Give and request feedback, set an icon’s download options, define metadata, set up asset life cycles, or view the revision history.

In the bar on your right-hand side, you’ll find an overview of file formats already attached to the given icon asset. Upload different file formats of it right there. You can also preview your icons on different backgrounds and with different font colors. Again, you can set up the link to the colors defined in your Style Guide as described above.

Note that it makes sense to use the SVG format for the source file to ensure scalability.

You can also relate icons to each other. Read more about asset relations here. Set up asset relations by uploading the respective assets or using the asset chooser to browse the existing assets in one of your projects.

The consumer view

When viewing the Icon Library from its frontend view (entering it via your Style Guide), all your icons will be displayed at one glance. Note that the icon assets are smaller than in other libraries. Once you’ve opened an icon, you’ll be able to see basic asset information like file, image size, and color.

Editing colors before downloading

You can edit colors from the selection you previously added in the backend.

Multi-Colored Icons

In the case of multicolored icons (determined by having either a Hexadecimal, RGB(A) & HSL(A) in the SVG), these are disabled, and therefore there are no colors shown.

Related Assets section

In your frontend instance, you can group icons into collections. Before downloading the respective icon selected from a collection, you can choose the file format and icon color. All the defined metadata can be recognized when switching to the metadata tab.

Once you set up the Icon Library, you can use the interconnectedness of Frontify and incorporate all of your icons or selected collections into your Style Guide. This, by choosing the smart block ‘Icon Library’>Select Icon Library or Collection.

If you don’t want your icons embedded in the Style Guide directly, you can link the Icon Library to your Brand Portal on top of your screen, as shown in the GIF below.

Setting up custom icon download sizes.

This feature is available for cloud and enterprise users of the platform. The library has a set of defined icon sizes to be used in the customer view of the Icon Library. The Library also has the option to customize the download icon sizes. This allows users to define the correct download sizes to ensure that icons are used according to brand standards.

Open your Icon Library from the backend and select the Usage setting from the icon on the Power Bar.

The middle section of the panel will allow you to add new icon sizes. Simply add a name and the size you’d wish to have, and press add.

On the consumer view of your library, the selected icon's name and size will correspond in the custom download sizes section. Simply select the PNG as a format, and you’ll see the options you had chosen in the ‘Choose the file size’ section.

Icon Library Asset Protection

In the same way, as in the Media Library and the Logo Library, the Icon Library has the option to protect your assets through the configuration of the download settings, giving you better control of the download process and records of who has access to them.

Configure Usage Settings

To set up the icon library asset protection, you need to head to the backend of your library. On the Power Bar Settings, select the Usage settings. This will open a side panel, providing you with several options.

If you don’t plan on protecting every icon within the Icon Library, we advise setting up a folder for unprotected assets. Following this method will make management a lot easier.

This panel gives you access to the Asset download protection, which allows you to protect assets by adding:

  • Asset protection by default - All assets in the Library are protected, and consumers can only request downloads.

  • Watermarks - Protection marks over the icon.

  • Auto approvals - Consumers would request the download and immediately get access to them.

  • Download validity length - How long the asset can be available after download.

  • Download request form - This allows you to create a form with the desired fields to interrogate the users on their download usage.

  • Preset sizes for download - Set as many types of sizes for logo downloading.

Learn more about Library asset download protection and setting up requests in our Asset Protection article

By default, all the project owners will receive notifications. You can deselect others if you do not want them to receive requests. Editors don't have the option to receive download requests.

You can set download permission on three different levels:

- Library: Through the Usage settings under ‘protect all assets by default.’

- Folders: On a folder level.

- Assets: On an asset level- through the Metadata panel at an individual asset level.

New assets will automatically inherit either the global or the folder level setting. Global or folder-level permissions will not overrule settings set on an asset level.

When a consumer wants to download a protected icon on the front end, they must make a download request. This request will reach the colleague you have chosen in the setup.

The request can then either be accepted or declined. In both cases, the platform will send a notification back to the person who made the request, and if they have been granted permission, they will be able to download the image immediately.

Suppose you set the option of Auto approval for your Library. In that case, the user requests an icon, fills in the form (if available), and immediately has access to the asset to download without waiting for manual approval.

Once approved the request, users can see all the options selected for that particular icon. In the case of the icon library, once granted access, the consumer can see all the icon options from the formats and colors.

Request Dashboard

As an admin, you’ll find all the pending requests conveniently in one single place with details on the asset itself, its location, the length of permission to download the asset, the date of submission, and the reason for the download. Either approve or reject. If you decline, you can state a reason.

In the case of Auto approvals, the status would appear as ‘Auto approved’ on the dashboard.

In case you have any further questions, please don’t hesitate to contact our support team.

We hope you have found this article helpful.

Did this answer your question?