Create an SVG Icon System

In this course, we will dive into a number of different ways we can create, optimize and integrate an SVG icon set. There are pros and cons to each method, so we’ll dissect each approach so you can make an informed decision for your project. We will learn how to use build tools to automate the process of creating, manipulating and optimizing icons. We’ll take a look at how to use CSS to manipulate styles on an SVG and even how to integrate your SVG icons in a React project.

• Optimize SVGs for Better Performance using svgo
• Include an SVG with an Image Tag
• Add an SVG as a Background Image
• Add an SVG as an Embedded Background Image
• Combine Multiple SVGs into an SVG Sprite
• Add an SVG Sprite as a Background Image
• Automate SVG Sprite Background Image Variations with a SCSS Mixin
• Embed SVG Directly In Markup with the “Use” Tag
• Load an External SVG Inside a “Use” Tag
• Style an SVG Icon with CSS
• Build an SVG icon component in React