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

Preparing the SVGs for the Icon Library

The SVG file is the base and the only format you can upload icons in.

Frontify is automatically creating the PNG version of the Icon for download, colored or original. For other formats, you can upload them directly to the icons as attachments.

Library functions depend on the correctly built original SVG file. Only when the file is correctly built:

  • icon coloring option is available in the Frontend of the Icon Library

  • icons are colored correctly (the entire outline of the icons takes up a new color) in the Frontend of the Icon Library

  • autogenerated PNG icons reflect the original SVG file

To make sure the Library functions work as expected keep in mind when preparing SVGs:

  1. An icon must be a combined shape, not a group

  2. An icon must be a single outline

  3. An icon should not have a shape over its outline - do not add a rectangular shape to frame it.

  4. Make sure there are no transparent shapes or layers in the structure of the icon

Important notes on the Coloring function: Only single-colored SVGs can be recolored. The coloring of multi-colored icons is not supported.

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. 

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

Editing colors before downloading

These can be selected from the selection of colors that were previously added in the backend.

Multi-Colored Icons

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

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 right 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, press add.

On the consumer view of your library, this will be shown exactly as you have included in the custom download sizes section. Simply select the PNG as a format and you’ll see the options you had chosen on the ‘Choose the file size’ section.

Related Assets

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. 

We hope you have found this article helpful.

Did this answer your question?