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 helps you upload icons in different formats like SVG, PNG, 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 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.
To upload the SVGs to Icon Library, you have to make sure they are correctly built.
Icons will be properly colored in the frontend of the Icon Library
PNG generated by Frontify will be correct and reflect the original SVG
Prerequisites for a correctly built SVG icon:
Must be a combined shape, not a group
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.
From here, you can either move the selected icons to existing folders or collections and assign them to the 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, 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 where the general Icon library usage options can be configured to allow another layer of security when consumers download assets - such as Download protection setting, an option for a download request form, to assign downloadable colors to your icons, as well determining different download sizes. 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 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. Upload different file formats of it 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, and color.
Editing colors before downloading
These can be selected from the selection of colors that were 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.
Related Assets section
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 in 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.
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.
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
In order to set up the icon library asset protection, you need to head to the backend of your library. On 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, then we would advise setting up a folder for unprotected assets. This 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 download.
Watermarks - Protection mark 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 - 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 any 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 setting or the folder level setting. Settings set on an asset level will not be overruled by global or folder level permissions.
When a consumer would like to download a protected icon on the front end, they will first have to make a request to download, which will be sent to the individuals you have chosen in the setup.
The request can then either be accepted or declined. In both cases, a notification will be sent back to the person who made the request and if they have been granted permission they will be able to download the image immediately.
In the case the option of Auto approval has been set for your Library, this means that the user requests an icon, fills in the form (if available), and immediately has access to the asset to download, without waiting for it to be manual approval.
When the request is granted the user will be able to see all the options that have been selected for that particular icon. In the case of the icon library once the access is granted the consumer will then be able to see all the options for the icon from the formats and colors.
As an admin, you’ll find all the pending requests conveniently at one single place with details on the asset itself, its location, the length of permission to download the asset, the date of request, and the reason for the download. Either approve or reject. If you reject, you can state a reason.
In the case of Auto approvals, the status would appear as ‘Auto approved’ in 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.