Introducing the Icon Library

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

Written by Rahulan Sivalingam Updated over a week ago

With the Icon Library, you acquire a dedicated library allowing you to group all your icons. This way, you no longer have to mix icons and other asset types in your Media Library – ending up in an organisational hassle. With its icon-tailored features, the Icon Library allows you to upload SVG format icons and then later attach the PNG, EPS, TIFF, JPG formats 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 by 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.

Organising 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.

From here, you can either move the selected icons to existing folders or collections and assign them to 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, 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 also have the possibility to embed the icon to 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.

On the power bar to your left, you’ll also find the general Icon Library Settings. Click on the cogwheel icon>Icon Library Settings to assign downloadable colors to your icons, or to set up a ‘New’ flag to the latest icons. Note that a link to the colors defined in your Style Guide is made.

When you click on an icon card, you’ll have the possibility to collaboratively work on it. 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. Attach different file formats right there. You’re also able to preview your icons on different backgrounds and with different font colors. Again, the link to the colors defined in your Style Guide can be set up 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 assets already existing 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 displayed smaller than in other libraries. Once you’ve opened an icon, you’ll be able to see basic asset information like file and image size, the collections the asset is assigned to, or the related assets. There, you’re also able to choose the file format and icon color, given that multiple color options are enabled in the backend, before downloading the respective icon. When switching to the metadata tab, all the defined metadata can be recognized.

Once the Icon Library is set up, you can make use of the interconnectedness of Frontify and incorporate either 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 to have your icons embedded to the Style Guide directly, you’re able to link the Icon Library to your Brand Portal on top of your screen as shown in the GIF below.

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