How to replace icon components in Figma

(Works with any image component)

Recently we received a question under our blog post How to use icons in Figma. It read more or less like this:

“Say I have created a component with an imported vector icon. I then edit the original SVG icon [in another tool]. How do I swap in the edited SVG into the already created symbol in Figma?”

We thought it would be a good idea to share a solution in a separate blog post. So here we are.

What is a component in Figma?

First, let get some clarification on what a component is in Figma. A component is an interface element that can be reused across your file. They allow for changes to be seamlessly applied across your design.

When you use icons in your designs, you will likely need to repeat the same icon multiple times across different screens or sections. To save you time, you will probably turn the icon into a reusable component and then create instances for all cases where the icon has to be repeated. An instance is a duplicate that will acquire styling changes made to the master component.

Turning an avatar into component and reusing it by creating instances (hold “Alt” to create an instance)

Notice that in the Layers panel, the newly created master component is marked by a quadruple diamond icon, while the instance acquires a single diamond icon.

Now, if you apply changes to the newly created master component, the remaining Spirdermen will change, too.

The synchronized choreography of a master component and its instances

How to swap the master component with another icon?

A more interesting question is how to replace the master component with a new icon or image. Let’s say you’ve decided that your prototype should have a Catwoman avatar instead of a Spiderman (sorry 🤷‍♀️). You want the master component to be updated along with all of its instances.

It’s actually very easy. All icons get imported to Figma in frames. So all you have to do is to erase the first vector from the frame (the vectors are usually clustered in a group) and move a new one into its place.

Here comes the Catwoman

Important things to note here:

• In this example, the master component was comprised of three elements: a notification mark, an outline circle, and our Spiderman icon. If you want to only replace the icon, you have to select the group representing this vector and hit “backspace” to erase it. The notification mark and the circle thus remain unchanged.
• When moving the Catwoman into the master component, we only drag the group representing the vector and not the entire frame.
• To keep things neat, remember to erase the remaining empty frame (Catwoman’s frame in this case).

That’s it! We hope you will find this tutorial useful. If you have any questions, feel free to ask them in the comments section.

To illustrate our examples, we used this Figma Payment App UI freebie and avatars by Iconify.