Skip to main content
Question

Replaceable Icon in Component

  • October 26, 2022
  • 2 replies
  • 3008 views
Kareem_Amr

I am pretty new to Figma so I need some help.

After searching and trying different approaches, I am unable to create a simple thing.

I want to create a component that is made up of an icon and a text.
Here is an example of said component.

image

I have the home icon as a component, and then I used an instance of that inside the larger component that contains text as well.

Now what I am trying to achieve is to be able to change the icon on the parent component of the home icon component and have changes propagated to all instances.

However, trying to replace the icon produced an error message of “Pasting inside the current selection is not possible”.

Any ideas what is a possible solution, if any exists?

Note the icons I use are from a plugin called Microsoft Fluent UI Icons by Iconduck.

2 replies

Kareem_Amr
  • Kareem_Amr
  • Author
  • 4 replies
  • October 26, 2022

One more thing.

I really wanted to have a single icon component, then create instances of that component and then replace the icon of each instance with a different icon.

This will allow my to control all icons by changing the main component icon. However, as I said replacing icons that in a component is not allowed.

Any idea?

Pavel_Kiselev
  • Pavel_Kiselev
  • Power Member
  • 438 replies
  • October 26, 2022
Figma tutorial: Component properties

It’s a pretty straightforward, have an instance of an icon, combine with a text layer into a component and now you can create an instance of your element and swap icon inside with another icon

And then take to the next level with component properties

Kareem_Amr
1 person likes this
  • Kareem_Amr
    Kareem_Amr

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings