Inpirational

/ 18 Aug 2025

How to Add Icons, Illustrations, and Animations in Figma

 Figma is a popular tool for designing websites and apps. It helps you create a visual plan for your project. A great design often needs more than just text and shapes. You need icons, illustrations, and even moving parts.

Using these design elements makes your projects look better. They help explain ideas to users. This guide will show you how to add all these things to your Figma projects. We will use a helpful tool called a plugin.

How to Insert Icons in Figma

Icons are simple pictures that stand for an idea. A good icon is easy to understand. Using the   plugin makes adding them very simple.

Change the Color of Icons in Figma


Once you have an icon on your page, you can change its color. This is easy to do.

  1. Click on the icon to select it.

  2. Look at the right side of the screen. This is the properties panel.

  3. Find the "Fill" section. It shows the current color of the icon.

  4. Click on the color box.

  5. Choose a new color from the color picker.

The icon's color will change instantly. This helps you match it to your design's colors.

Add an Icon Stroke in Figma

You can also add a line, or "stroke," to an icon. A stroke is a line around the shape.

  1. Select the icon on your canvas.

  2. In the right-side properties panel, find the "Stroke" section.

  3. Click the plus (+) sign next to "Stroke."

  4. A new line will appear. You can change its color and thickness.

This adds another layer of design to your icons.

How to Insert Vector Illustrations in Figma

Illustrations are more detailed drawings. Vector illustrations are special. They do not get blurry when you change their size. This is great for designs that need to work on different screens.

Here is how to add them with the IconScout plugin:

  1. Open the IconScout plugin again.

  2. Type a topic in the search bar. Try "nature."

  3. Look for the "Illustrations" tab in the search results. Click on it.

  4. You will see many different drawings.

  5. Click on the one you like.

The illustration will appear on your canvas.

Edit Illustrations in Figma

Because these are vector illustrations, you can edit them. You can change shapes and details inside the illustration itself.

  1. Click on the illustration on your page.

  2. Double-click it. This will open the illustration for editing.

  3. Now you can click on individual shapes inside the illustration.

  4. You can move them, resize them, or delete them.

Change the Color of Illustrations in Figma

You can also change the colors of parts of the illustration.

  1. Double-click the illustration to enter editing mode.

  2. Click on a part of the illustration you want to change, like a tree or a person's shirt.

  3. Go to the "Fill" section in the right-side panel.

  4. Change the color.

This lets you make the illustration match your design's color palette.

How to Insert 3D Illustrations in Figma

3D illustrations look like real objects. They have depth and shadows. They can make your design look modern.

  1. Open the plugin.

  2. Type a topic in the search bar, such as "computer."

  3. Click on the "3D" tab.

  4. Select a 3D illustration and click on it.

The 3D item will be added to your design.

How to Insert Animations in Figma

Animations are moving pictures. They can make a design more fun and engaging. Lottie animations are a popular type because they are lightweight. They won't make your design slow. 

The animation will be added to your design. You may need to use another plugin to see it move inside Figma. The LottieFiles plugin is a good choice for this.

Design Resources for All Your Favorite Tools

Now you know how to add all kinds of visual assets to Figma. You can use icons for clarity. You can use illustrations for a unique look. You can use 3D assets and animations to make your designs pop. These steps will help you create better projects

0 Comments

  • No Comment Yet!

You Might Also Like