Icons on Figma - Scalable Vector Graphics - Part 2

Name: Icons on Figma - Scalable Vector Graphics - Part 2
Rating: 4.4 (48 reviews)

Learn the basics of using and editing icons on Figma

Created byTadas Zemgulys

Last updated 4/2025

English

What you'll learn

The basics of scalable vector graphics on Figma
The basics of using icons on Figma
Resources and best practices
How to edit icons acquired from icon sets

Course content

1 section • 10 lectures • 1h 58m total length

Introduction6:11
Learn how to edit icons and leverage existing icon sets in Figma using scalable vector graphics, recognizing that drawing icons from scratch is costly and often unnecessary.
Vector Objects17:28
Master essential vector objects for icon design in Figma, including rectangle, line, ellipse, polygon, star, and pen tool, with fill, stroke, rotation, corner radius, and scalable vector graphics properties.
Lines12:02
Grid10:04
Design icon frames using a 24x24 default icon frame with a 1% grid, following Google material design version two guidelines, and construct circle and square shapes with precise strokes.
Boolean Operations16:17
Explore boolean operations in Figma using union, subtract, intersect, and exclude, showing how layer order shapes results and how flatten creates a single vector object.
Resources8:58
Plugins15:41
Explore feather icons and material design icons in Figma via plugins, compare their layering and grid alignment for consistent icon testing.
Editing18:12
Master icon editing in Figma by entering vector mode, adjusting points with the pen tool, closing loops to apply color, and using layers and flatten to finalize icons.
Exporting4:59
Export icons by keeping designs simple and ready for PNG export. Minimize SVG complexity with one layer to avoid issues, and consult forums or clients when problems arise.
Bonus8:21
Scale icons in Figma from 24 by 24 to smaller or larger sizes, and learn when designers redraw for precise measurements; use outline mode, Shift+O, and Shift+X to manage strokes.

Requirements

Internet access
Free Figma account
Mac or Windows computer

Description

Icons might appear as simple and insignificant objects, but this couldn't be further from the truth. Designing icons requires time and effort, and it is typically undertaken by professional icon designers—those who have delved into and mastered the nuances of this craft.

This training course serves as a continuation of Scalable Vector Graphics Part 1. In this course, you will acquire the fundamental skills for using and editing icons on Figma. Realistically, there is a vast array of pre-made icon sets readily available. Rarely will you need to create something entirely new from scratch. More often, especially in freelance, you'll be utilizing icon sets crafted by professional designers, making necessary adjustments as needed.

After completing this training, you will have the knowledge how to locate and utilize both free and premium icon sets and to make edits using the appropriate vector tools in Figma.

Keep in mind that this is a beginner-friendly course, designed with the primary goal of advancing your understanding of scalable vector graphics, with a particular emphasis on icon design.

Completing Scalable Vector Graphics Part 1 course might be beneficial, but not essential.

This training course is free and will remain so.

I really hope that you will consider joining, and I look forward to seeing you inside.

Who this course is for:

UI/UX designers
Graphic designers
Web designers