Course Curriculum

5 Sections
00

Course Overview

2 Lessons 9 min
  • Course Overview & Downloads 3 min
  • What Makes an Icon Different from All Other Visuals? 6 min

Resources Provided

  • 0.1_CheatSheet_Designing-Icons (PDF)
01

The Anatomy of an Icon

3 Lessons 40 min
  • Pixel-Perfect Icon Design 9 min
  • Icon Size and layout 4 min
  • Designing for Context: Desktop vs Mobile 4 min

Practice Activities

  • Make It Pixel-Perfect (Instructions) 19 min
  • Make It Pixel-Perfect (Walkthrough) 4 min
02

The Four Pillars of Icon Design

6 Lessons 50 min
  • Your Icon-Design Vocabulary 4 min
  • Shape 3 min
  • Color 5 min
  • Outline and Fill 4 min
  • Style 2 min
  • Watch Me Design an Icon 9 min

Practice Activities

  • Exploring Style (Instructions) 18 min
  • Exploring Style (Walkthrough) 5 min
03

Incorporating Icons into Your Design System

7 Lessons 56 min
  • Why Does an Icon Set Need to Feel Cohesive? 4 min
  • Applying Core Design Principles 9 min
  • Icons as Brand Elements 5 min
  • Figuring Out the Style of an Existing Icon Set 4 min
  • Audit Some Icons with Me 4 min
  • Balancing Uniqueness and Cohesion 3 min
  • AI and Icon Design 5 min

Practice Activities

  • Match the System (Instructions) 17 min
  • Match the System (Walkthrough) 5 min
04

Saving and Exporting Icons

6 Lessons 37 min
  • What to Expect 1 min
  • Exporting Scalable Icons (SVGs & Artboards) 4 min
  • File Naming & Icon Organization 3 min
  • Functional Icons vs. Iconographic Graphics 4 min
  • Developer Handoff Best Practices 3 min
  • Conclusion 1 min

Practice Activities

  • Ready for Handoff (Instructions) 18 min
  • Ready for Handoff (Walkthrough) 3 min

Learning Outcomes

  • Design pixel-perfect icons by snapping them to a pixel grid
  • Create cohesive icon sets that support branding and user clarity
  • Adapt icon designs for different devices and screen densities
  • Export clean, implementation-ready icons using best practices for developer handoff

Course Preview

 to watch NN/g videos

Tools Used in This Course

To complete activities in this course, you will need access to either Adobe Illustrator or Figma.

All other resources can be accessed through a standard PDF reader.

Turn Problems Into Solutions

Design clear, readable icons that scale across devices.

  • Use pixel grids and density-independent pixels to create clear, crisp, and consistent icons for all screen resolutions
  • Keep edges sharp and proportions accurate across all different icon sizes
  • Ensure icons remain legible and recognizable in real-world user interfaces

Craft cohesive and brand-aligned icon sets

  • Design icons that feel balanced and unified across the interface
  • Visually communicate the brand’s personality and make icons stand out as recognizable assets
  • Maintain icon consistency, usability, and visual harmony across different screens and components

Deliver clean, developer-ready exports

  • Keep assets organized, easy to update, and ready for handoff with systematic naming and SVG export best practices
  • Create clean, lightweight SVGs that developers can use without adjustments
  • Maintain consistency and quality across devices by meeting visual and technical standards before handoff ever happens

Frequently Asked Questions

How long will I have access to this course?
Once purchased, your access will never expire. This ensures you can learn at your own pace and return to review content as often as you'd like, whenever you need.
Will I get personalized instructor feedback on course activities?
No, personalized feedback is not provided for activities completed during the course. Most courses provide answer keys to activities that help learners reflect on their progress and understanding of course materials and examples.
What content can I download?
You can download a variety of resources provided with each course, including templates, how-to guides, cheat sheets, posters, reading lists, and more. Video lessons provided in all courses will not be available for download.
Can I access this course offline or on a mobile device?
Offline access isn't available yet, although we plan to add it. Most courses offer downloadable resources for offline reference.

For the best experience, mobile devices are not recommended.
Is this course eligible for the NNGroup UX Certification Program?
Unfortunately, self-paced courses do not count toward UX Certification. However, learners who complete the final exam will receive a “Recognition of Completion” to demonstrate their achievement.

See our Live Online courses for options that count toward UX Certification.
What can I share with my employer to show I’ve completed the training?
Upon completing a course’s final assessment, you will receive a “Recognition of Completion” showcasing your dedication to learning the topic. This document can be shared with your employer or professional network to demonstrate your new skills and commitment to professional development.