Hello! Welcome back to our final lesson in the Vector Illustration module. In our last session, you mastered tracing raster images, turning photos and sketches into clean, scalable vector graphics. This was a huge step in building your control over vector paths.
Today, we're going to put all your vector skills—using the Pen Tool, manipulating shapes, and applying Boolean operations—to work on a core task for any designer: creating a set of simple, consistent icons.
An icon set isn't just a collection of individual graphics; it's a visual family where every member shares the same DNA. Mastering this will be crucial for creating professional user interfaces, branding materials, and more. Your goal for this lesson is to create a cohesive set of icons using Figma's vector tools.
Let's dive in and learn how to build your own.
The Golden Rules of Icon Design
Before we even open Figma, we need to understand the principles that make an icon set successful. The single most important word is consistency.
To get a great overview of the fundamental rules, let's start with a video that breaks them down clearly.
Creating an Icon Set - Passive Income for Designers [Figma & ChatGPT]
In 'Creating an Icon Set,' the creator outlines six key principles for designing a cohesive set. Pay close attention to these rules, as they will be our guide for the rest of the lesson.
Watch the segment from 00:17 to 01:37. Focus on the concepts of consistency, visual weight, and using geometric shapes.
As the video highlighted, here are the key principles to keep in mind:
- Consistency is Key: All icons must look like they belong to the same family. This means using the same stroke weight, corner styles, and color palette.
- Consistent Visual Weight: Ensure that no single icon looks significantly "heavier" or "lighter" than the others. We'll explore how to achieve this with keylines shortly.
- Rely on Geometric Shapes: Building icons from basic shapes (circles, squares, rectangles) provides a strong, consistent foundation.
- Keep it On-Point: Use whole numbers for sizes and positions whenever possible. This aligns with the "Snap to pixel grid" setting and ensures your icons are crisp.
- Keep it Clear and Simple: Icons must be recognizable at small sizes. Avoid excessive detail that will turn into a smudge when scaled down.
- Stay Organized: Name your layers and frames logically. This is a professional habit that pays off, especially when you need to export your assets.
To dig a little deeper into these rules, especially how they apply in a professional context, the next video offers some excellent insights.
Build it in Figma: Design a cohesive icon set
The official Figma channel's video, 'Build it in Figma: Design a cohesive icon set,' features a design specialist discussing consistency in detail. This will add a layer of professional understanding to the rules we just learned.
Watch the section from 24:36 to 29:30. Pay attention to how the designer thinks about the level of detail, perspective, how objects overlap, and corner treatments.
Setting Up a Professional Workspace
To enforce consistency, we need to build our icons within a structured framework. This involves using grids and keylines.
This article from Streamline, 'How to design icons in Figma,' gives a great written overview of how to set up your workspace. It also links to a very useful free template!
Read the section titled 'Grids and key shapes.' Focus on how to create the frame, add a 1px grid, and understand the purpose of key shapes. Feel free to download the free Figma Community template they link to—it's a great time-saver!
Keylines are arguably the most important part of this setup. They are a set of guides within your frame (e.g., a 24x24 pixel square) that help you maintain visual balance between icons of different shapes. A 20px-wide circle feels visually smaller than a 20px-wide square because the square has more surface area. Keylines help you correct for this.
The following video gives the best explanation I've seen of why this is so important.
Build it in Figma: Design a cohesive icon set
Let's return to the 'Build it in Figma' video. This segment provides a fantastic explanation of what keylines are and why they are essential for creating a visually balanced icon set.
Watch from 18:38 to 22:15. The example comparing a circle and a square perfectly illustrates the problem that keylines solve.
Techniques for Creating Icons in Figma
Now that you understand the principles and have your workspace set up, let's explore the practical techniques for building icons. We'll use a single video that demonstrates three powerful methods.
1. Combining Basic Shapes (Boolean Operations)
This method is perfect for icons that can be constructed from geometric primitives like circles, squares, and rectangles. You'll create the basic shapes and then merge them using the Boolean operations you learned about in a previous lesson.
Creating an Icon Set - Passive Income for Designers [Figma & ChatGPT]
Let's go back to the 'Creating an Icon Set' video. The next two segments demonstrate how to build icons for a lightbulb and a settings gear using only basic shapes and the Union Selection tool.
Watch from 06:03 to 10:13. Notice the workflow: create shapes, convert them from fill to stroke (Shift + X), position them, and then use the Union tool to combine them into a single vector shape.
2. Drawing with the Pen Tool
For icons with more organic or custom shapes, the Pen Tool is your best friend. This is where your practice from the tracing lesson will come in handy.
Creating an Icon Set - Passive Income for Designers [Figma & ChatGPT]
The same video also shows how to create icons from scratch using the Pen Tool. These examples for a home and a heart icon showcase how to create both straight and curved lines.
Watch from 02:58 to 06:03. Observe how holding Shift creates straight lines for the house, and how the Bend Tool and handles are used to create the symmetrical curves of the heart.
3. The Hybrid Approach
Most designers mix and match techniques. You might start with the Pen Tool to create a custom body, then add details using basic shapes, and finally combine everything.
Creating an Icon Set - Passive Income for Designers [Figma & ChatGPT]
This final clip from the video shows a hybrid approach to create a rocket icon. A custom shape is drawn with the pen tool, a wing is created and mirrored, and a circle is added before everything is combined.
Watch from 10:13 to 12:14. This demonstrates a powerful workflow of creating parts separately to ensure symmetry and then flattening them into a single, complex icon.
Your Turn: Design a UI Icon Set
It's time to put theory into practice. Your task is to create a simple, consistent set of three essential UI icons: Home, User, and Search.
The Brief & Style Guide:
- Frame Size: 24x24 pixels
- Grid: 1px grid
- Stroke: 2px, centered
- Corner Radius: 1px (for a slightly soft look)
- Color: A single dark color (e.g.,
#1E1E1E)
Instructions:
- Set Up Your File: Create a 24x24px frame in Figma. Add a 1px layout grid and turn on
Snap to pixel grid(View > Snap to Pixel Grid). Draw your keyline shapes (a circle, square, and vertical/horizontal rectangles) on a separate layer and lock it. - Create the Home Icon: Use the Pen Tool to draw the classic house shape (a square with a triangle roof). Make sure the stroke weight and corners match the style guide.
- Create the User Icon: Use the Shape + Boolean method. Create a circle for the head and a rounded rectangle for the body. Use the Union Selection tool to merge them.
- Create the Search Icon: Use the Shape + Boolean method again. Create a circle and a small rectangle for the handle. Combine them to create a magnifying glass.
- Review for Consistency: Place your three icons side-by-side. Do they look like they belong to the same set? Check their visual weight, stroke, and overall style. Adjust as needed.
For a helpful written guide on using the Pen tool and editing your vectors, you can refer to the following resource.
Create a logo and icon set - Figma 101
The 'Create a logo and icon set' tutorial offers clear, step-by-step instructions for drawing icons with the pen tool and then editing them.
Review sections '8. Create a 3D box using the Pen tool' and '9. Create a set of icons'. This will reinforce the process of drawing with vector networks, which is exactly what you'll be doing.
Test your understanding!
You've designed your three icons, but the 'User' icon feels much smaller and lighter than the 'Home' icon, even though they are both 20px tall. What is the likely cause, and how would you fix it?
Show answer
The likely cause is the difference in their base shapes and visual density. The 'Home' icon is built on a solid square base, giving it more visual mass. The 'User' icon, with its curved head and shoulders, has less surface area. To fix this, you would use your keylines. You might make the 'User' icon slightly wider or taller, allowing it to occupy more space and "break" the strict 20px boundary, so that it feels as visually balanced as the 'Home' icon.
Conclusion
Fantastic work! You've successfully completed the Vector Illustration module. Today, you've learned not just how to create individual icons, but how to think in terms of a system—a skill that separates beginners from professionals.
Key Takeaways:
- A successful icon set is built on consistency in style, stroke, corners, and detail.
- Grids and keylines are essential tools for maintaining precision and visual balance across a set.
- You can create icons using various techniques: building with basic shapes and Booleans, drawing with the Pen Tool, or a hybrid approach of both.
This is the perfect foundation for our next module, Logo and Brand Identity Design. You'll find that the principles of simplicity, scalability, and consistency that you applied to icons today are directly transferable to creating memorable and effective logos. Our first lesson in that module will be to identify the characteristics of effective logos and different logo types. See you there