# Color and size inheritance for icons in a component **URL:** \ **Category:** Ask the community\ **Tags:** design\ **Created:** [December 11, 2024, 9:53pm UTC](https://community.penpot.app/t/color-and-size-inheritance-for-icons-in-a-component/7314 "2024-12-11T21:53:18Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![Ryan\_Limitless](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@Ryan\_Limitless](https://community.penpot.app/u/Ryan_Limitless)\ **Post date:** [December 11, 2024, 9:53pm UTC](https://community.penpot.app/t/color-and-size-inheritance-for-icons-in-a-component/7314/1 "2024-12-11T21:53:18Z")
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.