Skip to main content

Watch Trailer

Icon Design with Sketch

with Peter Nowell

Log in or Sign up for FREE and get full access to these and thousands of other Open Lessons in our catalog! Watch 1 Lesson For Free

  •   Trailer

  •   01 What Is an Icon and What We'll Learn Together

    06:27

Class duration: 3h 13m

See all 11 lessons
  • 2K students

    100% satisfaction guaranteed

  • 100% recommended

    4 student reviews

  • Access anytime

    OFFLINE SYNC WITH iOS APPS

Get the Pass

Unlock this class plus 1500+ more >

starting at $25/month*

$299/year or $39/month

Watch Now

You already have access!

Buy Class

$29

About The Class

bring icons to life with animation


Learn the fundamentals of icon design, and how to create icons in the software program Sketch. You'll also learn how animation can enhance your icons, and see how it's done with a little bit of code. Peter will cover the basic principles of icon design and show you his process. He'll guide you step-by-step as he works in Sketch to execute icons. He also explains what SVG files are and when to use them. Peter will show you the benefits of adding animation to icons with CSS code, and tips for adding unexpected movement to your graphics. 


Software Used: Sketch 2016

Topics Covered


Lesson Plan

  1. 01

    What Is an Icon and What We'll Learn Together

    06:27
  2. 02

    Icon Design Principles: The Structure

    20:10
  3. 03

    Icon Design Principles: The Details

    19:22
  4. 04

    Drawing Icon Concepts

    12:02
  5. 05

    Using Sketch to Design Icons

    22:09
  6. 06

    Getting to Know SVG

    11:15
  7. 07

    Optimizing Your Design For SVG

    15:04
  8. 08

    What's Possible with Animation

    06:53
  9. 09

    Designing Animation

    04:40
  10. 10

    Animating with CSS

    56:17
  11. 11

    Advanced Techniques & Next Steps

    19:09

Meet Your Expert

Peter Nowell

Peter Nowell is a designer based in San Francisco. He works with companies big and small to inspire and delight customers. Clients include Apple, Flinto, Sprightly Books, Juice Shop , and Sprightly Books. ... read more

See instructor's Classes

Bonus Material

Access your course materials here!

Get access to exclusive bonus content when you purchase this class.

  • pdf Class Resources Dedicated Web Page
  • sketch Icon Design Examples

100% of students recommend this class.
See what some of them have to say.

  • Michael Oeser

    Michael Oeser

    May 2016

    I don´t take online courses very often but this time I was courious how it will be and how knowledge would be transferred. It was great, really. Peter is an awesome presenter who is able to share and show his knowledge in a very pleasant and professional way. Great course for everybody interested in icon design with a focus on animation. For me personally I would like to see a course with a deeper focus on the design principles and techniques of icon design because I´m not so much interested in animation. But anyway great course.

  • lovemydreams

    lovemydreams

    March 2016

    Peter great job teaching Icon Design! I have no background in making icons but was interested in learning how it was done. I had know intention of using this course in my web/app design but now that i've started watching your easy to follow lessons I realized that I want to make my own icons and highly recommend this course to anyone that wants to take their skills to the next level! Worth buying this course to review many times as there is so much covered that you wish it was available sooner! Thank you Creative Live!

  • Aris K

    May 2016

    I stumbled upon this course after searching for more of Peter’s excellent tutorials. This beginner course will give you an overview of the icon design process starting with a useful icon design theory and considerations. The course then proceeds with two hands on examples that the viewer can also design while watching the tutorials. The first design uses basic geometric shapes the second is a "freehand" drawing using bezier curves. (TIP: read Peter's "Mastering the Bézier Curve in Sketch" free tutorial on medium.com beforehand). The second part is an overview of exporting SVG graphics and animating them with CSS. Personally, I would have liked more tutorials on icon design within Sketch and less about SVG , CSS. All in all, I enjoyed this course and would recommend it to anyone looking for a hands-on introductory course in icon design.

    Similar classes you might like

    You know who’d love this class...?

    When gift-spiration strikes, grab it. Give this class to a friend who’d love it. For their birthday or just because. (Or just because you missed their birthday.)

    GIFT THIS CLASS