Color and size inheritance for icons in a component

Hello! I’ve been banging my head against the wall for an hour now trying to figure something out in Penpot. I have a site that uses a ton of icons. Some of these icons are in buttons, some are in navbars, some are part of a headline, etc etc. Sometimes these icons need to be white. Sometimes they need to be black. Sometimes pink. Sometimes blue. Sometimes they need to be 12 x 12, sometimes 24 x 24, or 32 x 32. The icons are all black and 24 x 24 to start off with. Let’s say I build a default button component with an arrow icon next to the text. I make one in black and I make one in white. One small, one large. When I reuse the white button component but swap the arrow icon to, say, a chevron icon, the icon is black and doesn’t inherit the component color scheme and I have to manually change the color of the icon to white. The size is also whatever default size the icon was, so I have to manually change the size as well.

Am I doing something wrong? In Figma, I can make a standard default button component and add the icon picker as a property, choose an icon, and it stays white (or black or pink or blue, or whatever color my component says it should be) and the same size I have it in the component as. I’d like to migrate things over to Penpot, but if something simple like this doesn’t exist, I may just wait a bit. Any insight or help would be greatly appreciated.

2 Likes