Tutorial: How to use icons from a shared icon library in Penpot

I recently shared a css.gg icons library template in the Penpot Libraries & Templates collection. Here’s how you can use icons from this (and other) shared libraries in Penpot.

Tutorial: How to use icons from a shared icon library in Penpot

I recently shared a css.gg icons library template in the Penpot Libraries & Templates collection. This icon library joins the other icon sets shared by the Penpot community that you can use in your projects. 

0:00
/0:17

Icon libraries are indispensable for UI design. They provide a stockpile of uniformly designed icons that you can pull into your projects, saving you the time and effort of creating them yourself. So, how do you use these icons in your own Penpot projects?

What is a shared asset library?

Icon libraries are special Penpot files. You can open them just like any other Penpot file but also use them as asset libraries.

The Time page in the css.gg icons file. It has a preview of different time-related icons including an alarm clock.
If you open the css.gg icons file, you’ll find each group of icons has a page for the group’s main components.

An asset library is an area in your file where you can store reusable components, colors, and typographies. The icons in an icon library are components.

The Assets panel in Penpot showing the three components found in the Local Library alongside the file library’s colors and typographies.
The assets from your file are located in the Local library section of the Assets panel.

You can also connect an asset library published and shared from another file, like my css.gg icons library. Our user guide explains how to publish shared libraries with your team. Shared libraries are a great way to share a design system and other assets across your team.

The Assets panel showing sections for the Local Library and the CSS.gg icons.
When you’ve connected the shared library to your file, you can find its assets in its own section underneath your local library. You can connect multiple shared libraries to each file.

How to import an icon library

  1. Download the icon library file from the Penpot Libraries & Templates collection.
  2. Import the Penpot file into your Penpot team where you want to use the icons. Use the project options menu on the dashboard to Import Penpot file.
  3. Open the file where you want to use the icons. In the Assets tab in the left sidebar, launch the Libraries panel.
  4. In the Libraries panel, find the shared library in the Shared Libraries section and use the plus icon button to connect the library to your file.
Selecting Import Penpot files from the Project menu.
Import the Penpot file from the project options on the dashboard.
0:00
/0:17

How to import shared libraries from your team

You don’t have to download an icon library from the Penpot collection. If someone on your Penpot team has published a file as a shared asset library, you can connect that library to your file from the Libraries panel. The benefit of using a shared library from your team is that any updates made to the original file will update the asset library in your file.

A dialog showing over the Penpot workspace saying There are updates in shared libraries with options to dismiss or update.
You’ll get a notification whenever you or another team member makes an update to the shared library your file is using.
  1. Open the file where you want to use the icons. In the Assets tab in the left sidebar, launch the Libraries panel.
  2. In the Libraries panel, find the shared library in the Shared Libraries section and use the plus icon button to connect the library to your file.

How to use the icon components in your projects

  1. Find the icon you want to use in the Assets tab in the left sidebar in the css.gg icons section.
  2. Drag the icon you want to use from the components panel into your design on the canvas area.
  3. Right-click the icon on the canvas and choose Detach instance from the menu. Detaching the instance means you can change the icon size and fill color without any future updates to the icon library overriding your changes.
The shopping category in the css.gg icon components. Hovering over a shopping cart icon shows its name.
There are 917 icon components in the css.gg shared library. There are around 700 icons; I’ve repeated some icons across multiple groups to make them easier to discover when you’re browsing the assets library.
Searching for align in the Assets panel brings up any icons that include align in their name.
You can also search the assets panel for a specific icon. I’ve tweaked the icons’ names to make them easier to find in a search.

Penpot <3 Open Source

I’ve created the css.gg icons library using icons from the css.gg icons project. Thank you to Astrit and the other contributors for making and sharing these fabulous icons under an Open Source MIT license. At Penpot, we love Open Source, and that’s why Penpot is free and Open Source too

If you want to share your Open Source icons with the Penpot community, you can read all about how to contribute templates in our user guide. You don’t need to use Git or code to join in! 

Templates are a fantastic way for designers to contribute to Open Source projects like Penpot. You can share design resources, help other designers learn how to use Penpot and educate newer designers on best practices in your field. Please let us know in our Community space if you have any questions about contributing to Penpot.

Check out our other blogs, from informative topic guides to tutorials on how to get the most out of Penpot.

Tutorial: How to create responsive CSS Grid layouts in Penpot
With Penpot, you can create CSS Grid layouts without any code. This tutorial explores creating a bento grid layout for a sales dashboard UI.
Tutorial: How to create CSS Flex layouts in Penpot
Create CSS Flex layouts without learning how to code. This tutorial shows you how to use Penpot’s flexible layout tools using our sales dashboard UI template.
Tutorial: Create and share components in Penpot
Learn about creating components and libraries of shared components in Penpot for your team’s design system.
Tutorial: How to use components and shared libraries
Learn about components and how to use your team’s shared components for your design system in Penpot.