Skip to content

Icon Studio, from zero to pro

Learn to find the right free icon among 49,000, style it into an app icon, animate it, and take it into a website, a React app, a Power BI table or a slide, one icon at a time or a whole set in one zip.

Icon Studio6 lessons19 minBeginner to Advanced6 videos
0 · Start6 lessons100 · Pro
Start with lesson 1Open Icon Studio
Nothing loads from YouTube until you press play. Then Google receives your IP address and may set its own storage. Narrated with an AI-generated voice. Privacy

This course starts where you have never opened Icon Studio and ends with a matching icon set for a whole project: found in seconds, styled once, and exported in the format each place needs.

Every lesson is short and practical. By the end you will know which of the eight sets to search, how to make an icon read at 16 pixels, and how to use one in HTML, React, CSS, Markdown and Power BI.

What you will be able to do

  • Find and download a free icon in under a minute
  • Search eight open-source sets at once, narrow by set, style and topic, and know which set suits what
  • Style an icon with colour, stroke, a background shape, a gradient, a border and a shadow
  • Add motion that lives inside the SVG, with no library
  • Export SVG, PNG, a React component, CSS, a data URI or a Power BI measure, and know which to use where
  • Download many icons in one style as a zip or a sprite, with favourites, presets and the licences that come with them

Who it is for

Web and app developers, designers, people who build slides and READMEs, and Power BI developers who want icons in their tables. You need no account. Every icon is under the MIT, ISC or Apache 2.0 licence, so it is free for commercial work too.

The lessons

Beginner
  1. 01Find a free icon and download itYour first icon in Icon Studio in under a minute. Search nearly 50,000 free icons from eight open-source sets, check it at small sizes, and download it as an SVG or a PNG.5 steps3 minVideo17% of the course
  2. 02Search eight icon sets, by style and topicNarrow 49,000 icons down to the right one. Search all eight sets or one, switch between outline, filled and other styles, browse over 100 topics, and learn which set suits what.5 steps3 minVideo33% of the course
  3. 03Style an icon with colour, a background and a shadowTurn a plain icon into an app-style icon in Icon Studio. Set its colour, size and stroke, rotate or flip it, put it on a square, squircle or circle with a solid or gradient fill, and add a border and a shadow.7 steps3 minVideo50% of the course
Intermediate
  1. 04Animate an SVG icon without a libraryAdd motion to any icon in Icon Studio: spin, pulse, bounce, shake, or draw its outline in. The animation is CSS inside the SVG, plays wherever SVG plays, and stops for people who prefer reduced motion.4 steps3 minVideo67% of the course
  2. 05Use an icon in HTML, React, CSS, Markdown or Power BIEvery way to take an icon out of Icon Studio and where each one fits. Inline SVG for HTML, a React component, a CSS background, a data URI for Markdown and img tags, and a DAX measure for Power BI tables.7 steps3 minVideo83% of the course
Advanced
  1. 06Download many icons in one zip, with favourites and presetsBuild a matching icon set for a whole project in Icon Studio. Save a style as a preset, star icons as favourites, select many at once, and download them as SVGs or PNGs in one zip or as an SVG sprite, with the licences inside.6 steps4 minVideo100% of the course
Contact