How to Build a Material Icon: The Basics
summary
Hands-on demonstration of building a Material product icon using Figma, following Google’s 8‑dp grid at xxxhdpi and a 152px rounded square (12px corner radius). Shows undocumented details: drop shadow: blur 4px, y 4px, opacity 20% plus a secondary zero‑y top shadow, inner shadows (blur 0, y ±1), and using the 900 shade for shaded edges. Covers crafting a 45° long shadow as a filled shape with linear gradient (10–20% opacity), a radial white finish layer, export sizes, and ready templates — icon built and functioning.
AI-written summary · about
chapters (7)
- 0:00Introduction and setup
- 4:07Creating the icon template
- 16:28Building the background and foreground
- 21:24Adding long shadow and finish lighting
- 28:16Adding secondary symbolism
- 31:07Icon design principles and practices
- 38:34Q&A and workshop wrap-up
related talks
47mThe Icon Design Process
46mLets Design an Icon Set
22mCrafting better App Icons
44mIcons and How They Are Prepared
22mDesigned. an introduction to design for developers
48mAdaptive Icons: Case Studies & Principles of Design
18mThe space-filling curve of design
30mDesigner–Engineer Workflows in Android App Development