1.7 Icons

In the Figmaster - Lessons Figma file, open the 1.7 Icons page.

Introduction

Time to set up our icon component library. In this chapter, I will show you a quick way on how to convert SVG icons into components. Having the icons as components will let us use them in all components, and you'll be able to swap them easily in, e.g., buttons. I will cover how to use them efficiently in the 4th Module.

In Figmaster, we won't focus on drawing an icon from scratch simply because this course is about creating a design system. However, if you are interested in drawing an icon in Figma by yourself, I will link some useful guides on how to do it in the resources chapter at the end of this Module.

Phosphor Icons

In the Figmaster Design System, we'll use an open-source set of Phosphor Icons. It's a beautiful and usable library with hundreds of icons. In this chapter, you will learn two ways of adding icons to your design system.

In the first step, I will show you how to get the Phosphor Icons file from the Figma Community and add it to our design system file.

In the second step, you will learn how to work with icons in SVG that you've downloaded on your computer. I often work with different sets of icons, and I've noticed that most of them are not available on the Figma Community. That's why I think it's necessary to show you how to do it.

Step 1. Working with icons from the Community

  1. Open the Figma Community in a new tab.
  2. Search for Phosphor Icons and open the file.
  3. Click on the Duplicate button to duplicate it into your files. The new file will open.
  4. In the Pages panel on the left, go to the Fill page.
  5. Select all icons on this page with your mouse.
  6. Press CTRL + C to copy them.
  7. Go back to the Figmaster - Lessons file.
  8. Paste (CTRL + V) the icons inside the 1.7 Icons page.
  9. Select all icons with CTRL + A.
  10. In the top right corner of the Figma UI, change all icons' width and height to 24 px. Remember to keep the Constrain proportions icon enabled.

Step 2. Working with SVG icons

You're doing fantastic! In this step, we'll replace four icons from the Phosphor set we've just pasted into our design system with the SVG icons I've prepared.

Part 1. Find and delete icons

We need to find four icons that we want to replace. Let me show you a quick way to find a component in an extensive set of components without looking for it manually/visually.

  1. Select the first icon (ArrowUp) in the top left corner.
  2. Click on the icon, and while pressing ALT + SHIFT move, it 48 px to the top.
  3. Having the new icon selected, find the Swap Instance panel on the right:
  4. Search for CaretUp in the Swap Instance panel.
  5. Press Go to main component icon (four squares).

Part 2. Add SVG icons

  1. In the Figmaster Files.zip file you got from Gumroad, you will find the** Icons** folder.
  2. Select all icons in the folder.
  3. Drag and drop them into the Figma file canvas.
  4. Move them to the place where the previous icons were:
  1. Having the new Caret icons selected, click Create multiple components option in the Components dropdown (four squares) at the Figma UI's top-center.
  2. Select all icons on the page (CTRL + A).
  3. In the Selection colors panel on the right, you will have two colors: 000000 and 424242.
  4. Hover on the 000000 color and press the Style icon (four dots).
  5. Choose the Neutral / 90 style.
  6. Repeat the process for 424242 color.
  7. Having all icons selected, press CTRL + R to bring up the rename menu.
  8. In the Rename to input, type: Icon / $& and press Enter.

Great work! Our icons are ready to use!

In the next chapter, I prepared some extra materials that you can explore and learn more about. You'll find some theory and insights on typography, color, spacing, and more interesting topics related to design system creation.

PreviousNext