What would be a good way of adding self-made icons to graphics under assets?

Ask the community
1

I assume this is something one would like to do.

What I’ve done so far is first exporting the icon, and then importing as graphic. This is a bit cumbersome. Is there a better way?

3 Likes
2

This is going to sound weird, but the best option to store your graphics is not to add them as graphics but create components with them instead. You can always organize them the way it works better for you, for instance under a group called “Icons”.

Create your icons as components has significant advantages over graphics:

  • You can update them and propagate their changes (shapes, color, etc).
  • You can add them to your assets without exporting / importing. Select and Ctrl+K.
  • A component can contain more than one layer. This is specially useful so you can add them a transparent background area to all of them to maintain equal size and proportions regardless their shape.

The obvious question at this point is: why do the graphics exist then? This asset type was created before components existed in Penpot and while it was very useful at the time, we are now thinking of removing them while improving the components. Disclaimer: if this change is made, it will always take into account the backwards compatibility of existing graphics.

3 Likes
3

Thanks for the detailed answer! I guess you meant to write “component” in your last bullet point, not “graphic”?

1 Like
4

What a (already corrected) lapsus :sweat_smile:

1 Like
5

Lol, I had added a bunch of icons as components, then was reading some docs/looking at examples and saw that icons should be added as graphics so I deleted all the components and added the icons as graphics. I then wanted to change the icon color, but couldn’t figure out how to change the stored graphic so did some Googling and found this thread. Good thing for CTRL-Z! :laughing:

Related question: if my icons are very light-colored (in my case, white), is there a way to make them more visible in the Components panel? The icon is displayed with a light gray background which makes light-colored graphics hard to discern.

6

I’m afraid there’s no way to have this background changed yet. However, we are thinking in ways to solve this case.