# Import Iconify icons **URL:** \ **Category:** Libraries & Templates\ **Tags:** libraries-templates\ **Created:** [November 23, 2024, 8:27pm UTC](https://community.penpot.app/t/import-iconify-icons/7125 "2024-11-23T20:27:47Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\ **Post date:** [November 23, 2024, 8:27pm UTC](https://community.penpot.app/t/import-iconify-icons/7125/1 "2024-11-23T20:27:47Z")
Hey, I have already read the following [is there any way to import access google material icons](https://community.penpot.app/t/is-there-any-way-to-import-access-google-material-icons/2231) and [Contribute to Penpot: Step-by-Step Guide](https://penpot.app/how-to-contribute) but I can’t figure out how to import icons into Penpot. I would like to import the [Iconify icons](https://icon-sets.iconify.design/) 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](https://community.penpot.app/t/all-icons-multi-library-icon-plugin/6300) whether it is possible to add the icons. ---
**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\ **Post date:** [November 23, 2024, 8:44pm UTC](https://community.penpot.app/t/import-iconify-icons/7125/2 "2024-11-23T20:44:16Z")
Is it possible to place subtitles in this video [Penpot Libraries and Templates. How to create and contribute!](https://www.youtube.com/watch?v=ToWFGyYsRgU)? 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](https://penpot.app/blog/tag/tutorial/) but couldn’t find an answer to my question. ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [November 25, 2024, 9:48am UTC](https://community.penpot.app/t/import-iconify-icons/7125/3 "2024-11-25T09:48:09Z")
There’s a [Material Design icons set](https://penpot.app/penpothub/libraries-templates/material-design-icons) 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](https://penpot.app/blog/tutorial-how-to-use-icons-from-a-shared-icon-library-in-penpot/#how-to-import-an-icon-library). Let me know if you have any more questions! ---
**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\ **Post date:** [November 25, 2024, 10:54am UTC](https://community.penpot.app/t/import-iconify-icons/7125/4 "2024-11-25T10:54:07Z")
Thx, is there also a tutorial how to create for example a [iconify](https://icon-sets.iconify.design/) icon library and how to publisch the penpot file to [github](https://github.com/penpot/penpot-files)? ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [November 25, 2024, 11:07am UTC](https://community.penpot.app/t/import-iconify-icons/7125/5 "2024-11-25T11:07:39Z")
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? ---
**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\ **Post date:** [November 25, 2024, 11:26am UTC](https://community.penpot.app/t/import-iconify-icons/7125/6 "2024-11-25T11:26:48Z")
I would like to use the [iconify circle flags](https://icon-sets.iconify.design/circle-flags/) The penpot template GitHub repo ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [November 25, 2024, 12:20pm UTC](https://community.penpot.app/t/import-iconify-icons/7125/7 "2024-11-25T12:20:48Z")
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](https://github.com/HatScripts/circle-flags/tree/gh-pages/flags). (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](https://help.penpot.app/user-guide/objects/#Boards)** for your icons. 4. (Optional but it will make your life easier!) **Add a [Flex layout](https://help.penpot.app/user-guide/flexible-layouts/#layouts-flex) 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](https://penpot.app/blog/tutorial-create-and-share-components-in-penpot/#create-components)**. Do this for each icon. 7. [Ensure your icons have easily findable names](https://penpot.app/blog/tutorial-create-and-share-components-in-penpot/#naming-components). 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](https://help.penpot.app/user-guide/libraries/#shared-libraries)**. 9. Create another file and [connect your shared library](https://penpot.app/blog/tutorial-how-to-use-icons-from-a-shared-icon-library-in-penpot/#how-to-import-shared-libraries-from-your-team) 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](https://penpot.app/penpothub) 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](https://penpot.app/how-to-contribute) 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](https://github.com/penpot/penpot-files). Good flex layout settings for icons: ![Flex board settings for icons](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/4/4e25d97d78c8350332ed4a8093b67a2805e091d7.png) Should look a bit like: ![screenshot Google Chrome-2024-11-25 at 12.00.19@2x](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/a/af25eb21b4975dec618b9b0531d348d06fac883e.png) 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 🙂 ---
**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\ **Post date:** [November 25, 2024, 12:31pm UTC](https://community.penpot.app/t/import-iconify-icons/7125/8 "2024-11-25T12:31:55Z")
Thanks for the detailed explanation 😀 If you want to use dynamic icons like [Quill Icons - 140 open source icons - Iconify](https://icon-sets.iconify.design/line-md/) , this also works with the above explanation or do you need to do something else? ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [November 25, 2024, 2:10pm UTC](https://community.penpot.app/t/import-iconify-icons/7125/9 "2024-11-25T14:10:03Z")
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! ---
**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\ **Post date:** [November 25, 2024, 3:14pm UTC](https://community.penpot.app/t/import-iconify-icons/7125/10 "2024-11-25T15:14:42Z")
Thx, just sended in a fearure request on the Penpot GitHub repo to support animated SVG ---
**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\ **Post date:** [November 26, 2024, 8:07pm UTC](https://community.penpot.app/t/import-iconify-icons/7125/11 "2024-11-26T20:07:25Z")
> [@LauraKalbag](#): > > 1. [Ensure your icons have easily findable names](https://penpot.app/blog/tutorial-create-and-share-components-in-penpot/#naming-components). 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 ![afbeelding](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/9/9cbc5b91f911e8be0a2a99ab6aa5e5c0ef2c89aa.png) ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [November 29, 2024, 12:31pm UTC](https://community.penpot.app/t/import-iconify-icons/7125/12 "2024-11-29T12:31:14Z")
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? ---
**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\ **Post date:** [November 29, 2024, 1:02pm UTC](https://community.penpot.app/t/import-iconify-icons/7125/13 "2024-11-29T13:02:57Z")
Understand the confusion, just to clarify myself this is what I currently have ![afbeelding](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/b/b56abdfebb68678e018e6dfa01371480890209cb.png) And want to do something like this ![afbeelding](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/4/43b241ccb8737f7065d2e3f20b152b1e4f39b664.png) When I look [here](https://help.penpot.app/user-guide/components/), 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` ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [November 29, 2024, 1:19pm UTC](https://community.penpot.app/t/import-iconify-icons/7125/14 "2024-11-29T13:19:32Z")
> 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. ---
**Author:** ![BDV](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/bdv/32/8012_2.png) [@BDV](https://community.penpot.app/u/BDV)\ **Post date:** [December 5, 2024, 3:20pm UTC](https://community.penpot.app/t/import-iconify-icons/7125/15 "2024-12-05T15:20:48Z")
UPDATE there is now a [Penpot plug in for Iconify](https://github.com/iconify/iconify-penpot)