Tiny Beautiful Things - An icon design course in Figma

Good iconography is as important a part of any user interface as colors, typography, and illustration. Icons are easily recognizable, transcend language, and add unmatchable aesthetics.

In this 7-hour-long course, you'll learn how to design vector user interface icons in Figma.

Forget about the pen tool, remember this: Most icons are simple vector shapes combined with vector operations.

In the first module, Foundation, we will learn about vector shapes, how they are positioned, and how they can be manipulated and combined.

Lesson in the Foundation module:

• Introduction to vectors
• Basic vector operations
• Advance vector operations
• Optical alignment - 1
• Optical alignment - 2
• Drawing keylines

Once done grueling over the basics for a little more than an hour, we’ll move on to the most sincere form of admiration, recreating some of the icons from the most popular apps and websites.

We will also learn how to create different sized and themed variants of the same icon, and how to package them together as Figma components.

Lessons in Imitation (1) module :

• Drawing our first icon
• Drawing more icons together
• More..
• And still more
• Baking icons
• Filling icons - 1
• Filling icons - 2
• Pixel snapping
• Drawing smaller variants
• Making an icon library

Lesson in Imitation (2) module:

• Getting started
• Icons with hand
• Icons with nature
• Castle & Valley
• Stickman posed icon

The third step in learning, after foundation and imitation, is creation. In the last module, we will learn how to ideate on icons. We will take icons out of the constraints of screens and design something for the real world. We’ll also create icons that I have personally made with my sweat and fingers.

Lesson in the Creation module:

• All about style
• Brainstorming ideas
• Executing ideas
• Abstraction in icon design
• Goodbye