Skip to content

PRO TIP Block youtube.com at the DNS level — Pi-hole, NextDNS or your hosts file — but allow youtube-nocookie.com and i.ytimg.com. These tutorials keep playing; the rabbit hole does not.

Learning without distractions

How to Design a Bookmark Icon in Figma | Step-by-Step Icon Tutorial

174 views on YouTube

In this step-by-step Figma tutorial, we’ll design the Bookmark (or Save) Icon — one of the most commonly used icons in modern UI/UX design.
Using Figma’s Pen Tool, Rectangle Tool, and Polygon Tool, we’ll build this icon from scratch with pixel-perfect precision.

This is part of our UI/UX Masterclass 2025, where we design a complete icon set for a real mobile app using professional Figma workflows.

In this video, you’ll learn how to:
Create a custom bookmark/favorite icon from basic shapes
Use the Pen Tool and Boolean operations (Subtract, Union)
Apply smooth roundness and clean geometric proportions
Align and frame icons perfectly at 32×32 px
Maintain color and consistency across your icon set

By the end of this tutorial, you’ll be able to:

Design clean, professional icons for apps and dashboards
Build reusable components for your design system
Speed up your icon design workflow inside Figma

This video is part of our “Become a UI/UX Designer in 2025” Masterclass,
where we design an entire mobile app using Figma, AI tools, and real-world UX practices.

Enroll in the Full Course on Udemy:
https://www.udemy.com/course/complete-uiux-design-course-figma-ai-real-project/?referralCode=1AC2CAE903AE3CF207C9

#figma #uiuxdesign #icondesign #figmatutorial #BookmarkIcon #figmaicons #uidesign #uxdesign #designwithfigma #figmaforbeginners #UIUXMasterclass #learnfigma #figmatips #designsystem #SaveIcon #FavoriteIcon #Figma2025