Mastering the art of product iconography
Learn how to build creative and cohesive product icon systems.
This course is no longer available.
Explore other courses
Course overview
Craft custom product icons in 3 weeks
You'll become an expert in crafting and maintaining product iconography systems, from the fundamentals of icon design all the way to constructing your own unique icon set.
Who is this course for
01
Intermediate to advanced product and brand designers who are aspiring icon creators.
02
Freelance designers who want to expand their skillset and client base.
03
Illustrators who want to bolster their practical knowledge of product icon design.
Key outcomes
Apply brand principles
You'll learn how to interpret a brand's visual brand language in order to create a unique icon system that is fresh and relevant. You will create your own icon system you can use within a portfolio.
Create cohesion within an icon system
You'll dive into what makes an icon system cohesive, and how to implement visual language across a variety of concepts.
Harness Figma's power to speed up your process
You'll get a masterclass on illustrating in Figma, and be able to create flexible icons that save you time and future headaches.
Build specialist knowledge you can bring back to your team
You'll be the new icon expert on your team when you're able to lead a team in how to create, maintain, and develop iconography from Figma to code.
See what people are saying
Andrea Grigsby
Anna Rocca
J. Griff Griffith
Lea Escobar
Meet your instructor
Bonnie Kate Wolf
Bonnie Kate Wolf
Freelance icon designer for the brands you love
Great iconography fits seamlessly and almost invisibly into any product experience.
Over the past 10 years, I've created sophisticated and original iconography systems ranging from fashion to fintech. I'll help you learn how to create a system for any industry.
This course will teach you all the intricacies of icon design. No drawing experience needed.
Course syllabus
6 live sessions • 34 lessons • 9 projects
Week 1
- đź“„
The icon designer's mindset
- đź“„
Key lines and the pixel grid
- đź“„
Keyline examples
- đź“„
Stroke weight
- đź“„
Fills and strokes
- đź“„
End caps
- đź“„
Joins
- đź“„
Corner radii
- đź“„
Meet Bonnie Kate
- ✍️
Optional: create an introduction
Submit by May 9 - đź“„
Icon Style Sample File
- ✍️
Merch Store Style Parameters
Submit by May 12 - đź“„
Answers: Style Parameters
- ✍️
Supplemental icons
Submit by May 12
May
12
Fireside Chat 1 AM
May
12
Fireside Chat 1 PM
Foundations of product iconography
In the first module, you'll learn the principles of product icon illustration. This covers topics like grids, sizing, stroke weight, end caps, joins, and metaphor. Later, you'll get a chance to build a small set of icons that encapsulate all the knowledge you've gained about the basics.
Introductions
Introduce yourself to the cohort and get to know your fellow students
Merch Store
In this assignment, you’ll use your analytical skills to identify iconography design parameters from a predesigned set. This skill is extremely helpful when you’re adding icons to an existing set without guidelines. Often, designers are asked to supplement open source iconography systems like Font Awesome. Being able to identify what makes a set cohesive will allow you to create seamlessly within any icon style.
Week 2
- đź“„
Hierchy of icon principles
- đź“„
7 Principles of Icon Design
- đź“„
The lifecycle of an icon
- đź“„
Deconstructing a brand for inspiration
- đź“„
The values of universality and familiarity
- đź“„
Growing a concept
- đź“„
My five favorite plugins
- ✍️
Share your favorite plugins
Submit by May 16 - đź“„
Gaps
- đź“„
Intrinsic padding
- đź“„
Common mistakes
- đź“„
Vector networks
- đź“„
Boolean operations
- ✍️
Copycat
Submit by May 17 - ✍️
Design a set of your own icons for Ballad
Submit by May 19 - đź“„
UI screens
- đź“„
Ballad brand guidelines
- ✍️
Give feedback to two other designers on their work
Submit by May 23 - đź“„
Design process
- đź“„
Don't fear the pen tool
- đź“„
Corner radius like a boss
May
19
Fireside Chat 2 AM
May
19
Fireside Chat 2 PM
Frameworks for iconography
This is a series of original frameworks I designed to better explain larger concepts around the creation of iconography.
Leveling up your Figma icon design skills
Dive deeper into the world of Figma's illustration tools. Learn how to avoid some common mistakes. Plugins!
Music App
Create a series of icons for a music app in the style of your choosing, following the Ballad brand guidelines for inspiration.
Next-level icon design demos
See the icon design process in this series of demo videos
Week 3
- đź“„
Preparing your final icons for production
- đź“„
Naming and metadata
- đź“„
Categorization
- đź“„
IBM Carbon
- đź“„
Exporting SVGs
- ✍️
Finalize your library
Submit by May 26 - ✍️
Give yourself feedback
Submit by May 26 - đź“„
Creating icons that work for animators
May
26
Fireside Chat 3 AM
May
26
Fireside Chat 3 PM
Music App Post Feedback
After Bonnie Kate and your fellow students provide feedback on your icons, make any changes, and begin preparing them for production.
Course schedule
4-6 hours per week
Exclusive video content
40 minutes per week
First-of-its-kind video content detailing the iconography design process from idea to SVG. You'll learn the techniques used by the professionals via unique video content.
Weekly projects
2-4 hours per week
Specific course assignments designed to help you build practical icon design skills and produce at a professional level.
Live Q&A
Fridays 8am + 1pm PST
Submit your questions in advance for a fireside chat style Q&A. Questions welcome from the room. Here you'll have a chance to ask for professional advice, project specific questions, and about iconography in general.