Lets Design an Icon Set
summary
Explains a repeatable construction method using overlapping circles and Figma booleans to build icon sets (examples: rocket, cog, globe, fingerprint), working on a 32‑pixel artboard with a two‑pixel stroke then scaling to 24px; maintains Heroicons — about 900 icons across three styles (≈300 each) built over months; uses pen tool only for tricky maps, applies rounded joins and optical offsets per icon, and tests icons in real UI to confirm they read at small sizes.
AI-written summary · about
chapters (20)
- 0:00Introduction
- 3:13Finding icon inspiration
- 5:00Setting up the artboard
- 8:31Building the rocket shape
- 15:09Designing the rocket fins
- 18:02Creating the rocket flame
- 19:46Adding finishing details
- 23:41Edge cases like the cog icon
- 26:36Complex shapes like the globe
- 28:46Fingerprint icon breakdown
- 33:29Designing other icons in the set
- 35:14Q&A: Niche concepts
- 36:39Q&A: Sketching process
- 37:19Q&A: Icon sizing across screens
- 38:22Q&A: Time investment for icon sets
- 39:26Q&A: Selling icon sets
- 40:29Q&A: Tailwind CSS updates
- 41:52Q&A: Shape selection process
- 42:54Q&A: SVG sizing best practices
- 43:57Q&A: Dream icon set
related talks
47mThe Icon Design Process
18mThe space-filling curve of design
22mCrafting better App Icons
48mAdaptive Icons: Case Studies & Principles of Design
38mMastering the art of crafting code-aligned UI kits
44mIcons and How They Are Prepared
24mTiny Design Systems for Tiny Teams
24mSF Symbols. Icons for everyone?