Import Iconify icons

[BDV]

Hey,

I have already read the following is there any way to import access google material icons and Contribute to Penpot: Step-by-Step Guide but I can’t figure out how to import icons into Penpot.

I would like to import the Iconify icons library but I can’t figure out how to do this.
I understand that you can import icons via email or via GitHub, but I don’t really understand what these files should look like and what steps you need to take.

I have also asked here ∞ All Icons - multi-library icon plugin - #6 by Belar whether it is possible to add the icons.

[BDV]

Is it possible to place subtitles in this video Penpot Libraries and Templates. How to create and contribute!? Personally, I find it difficult to understand what the person was saying because I feel like he speaks quite quickly. Thx

I also looked here Tutorial - Penpot Blog but couldn’t find an answer to my question.

[LauraKalbag]

There’s a Material Design icons set in the Penpot Hub that you can download and import into Penpot.

Here’s a tutorial I wrote on how to import an icon library.

Let me know if you have any more questions!

[BDV]

Thx, is there also a tutorial how to create for example a iconify icon library and how to publisch the penpot file to github?

[LauraKalbag]

Not a specific tutorial, but I can help you with the specifics. A few questions first:

• Is there a particular iconify icon library you want to use?
• Do you want to publish the Penpot file to your own GitHub repository, or add it to the Penpot templates GitHub repository?

[BDV]

I would like to use the iconify circle flags

The penpot template GitHub repo

[LauraKalbag]

Great. I’ve made some icon sets from Iconify icons before, and this is the process I’ve used:

1. Download the SVG files for each icon from the Iconify circle flags set. (Top tip: you can find the GitHub repo for Iconify icons by clicking the MIT etc license link.)
2. Create a Penpot file for your library, give it a descriptive name like “Circle Flags.”
3. Add a board for your icons.
4. (Optional but it will make your life easier!) Add a Flex layout to your board. This will lay your icons out nicely when you add them to the board. I’ll add my suggested settings to the end of this post.
5. Drag or copy-paste the icon SVG files onto your Penpot file’s canvas. Penpot loves SVG files and should render them all nicely.
6. Check that each icon is rendering correctly and then make it into a component. Do this for each icon.
7. Ensure your icons have easily findable names. For flags, I’d recommend naming them with the country code and country name like IE Ireland.
8. Now you have all your icon components created locally. You can publish your icon components as a shared library from the Libraries panel.
9. Create another file and connect your shared library to check that your icon components/library are working as you want them to.
10. Create a template thumbnail image on a page with a 1390 x 724 board in your shared library file. It’s useful to include the library name, version number, and any credits in the thumbnail but be aware it’ll be displayed quite small (check out the Penpot Hub for ideas). You can also right-click your board and choose “Set as thumbnail” and this will make the board into the file’s thumbnail in your Penpot workspace as well.
11. Download your Penpot file.
12. Share your file with the Penpot team via email so they can upload it to GitHub for you. Or if you’re comfortable with Git, make a pull request to the Penpot files GitHub repository.

Good flex layout settings for icons:

Should look a bit like:

Sidenote: if you’re using somebody else’s icons, make sure the license allows you to redistribute the icons! And be sure to give them credit

[BDV]

Thanks for the detailed explanation
If you want to use dynamic icons like Quill Icons - 140 open source icons - Iconify , this also works with the above explanation or do you need to do something else?

[LauraKalbag]

Penpot doesn’t currently support SVG animations, so these won’t show inside Penpot. It does preserve some SVG attributes that you can’t add in Penpot itself, but I’m not sure how this would affect animations. However these icons could still be useful for demonstrating states and transitions and would still make a cool icon set!

[BDV]

Thx, just sended in a fearure request on the Penpot GitHub repo to support animated SVG

[BDV]

@LauraKalbag

7. Ensure your icons have easily findable names. For flags, I’d recommend naming them with the country code and country name like IE Ireland.

Can you explain this in a lite bit more detail?
I want to do the following but don’t realy get how to do it, I maneged to create a component.
But the next step I keep struggeling

[LauraKalbag]

From this screenshot, I can see that your icon will be named arrow align horizontal and it’ll be inside an arrow group inside an icon group. This looks like good naming and organisation to me!

Now you should be able to see your icon component in the Assets tab under the Local library → Components section?

[BDV]

Understand the confusion, just to clarify myself this is what I currently have

And want to do something like this

When I look here, the only thing I have to do is:

Create component groups

At the Components section from the Assets library, there are two ways to create groups in a components library.

1. Using slashes (/): Select one component and rename it as follows: “FOLDER NAME/COMPONENT NAME”. For example, “Buttons/Alert Button”.
2. Using the “Group” option: Select one or more components at the Assets library, right click to show the menu and then select “Group”.

So rename AD Andorra to Icon / flag / AD Andorra

[LauraKalbag]

So rename AD Andorra to Icon / flag / AD Andorra

Exactly that. You can rename the main component layer, or you can rename the component from the Assets tab.

[BDV]

UPDATE there is now a Penpot plug in for Iconify