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 and preview them on different backgrounds – also transparent ones.

Note that the main upload format is SVG, while other formats can be added as attachments.

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:

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.

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:

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

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.

Please note that for icons it isn't possible to change the color of other formats other than svg and png.

You can set up the link to the colors defined in your Brand Guideline 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.

When viewing the Icon Library from its frontend view (entering it via your Brand Guideline), 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.

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

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.

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 Brand Guideline. This, by choosing the smart block ‘Icon Library’>Select Icon Library or Collection.

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

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.

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.

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:

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.

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.