Create an SVG Icon System

28 minutes

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.

pro-course-rss-logo

PRO RSS Feed

Optimize SVGs for Better Performance using svgo

P

Include an SVG with an Image Tag

P

Add an SVG as a Background Image

Add an SVG as an Embedded Background Image

Combine Multiple SVGs into an SVG Sprite

P

Add an SVG Sprite as a Background Image

P

Automate SVG Sprite Background Image Variations with a SCSS Mixin

P

Embed SVG Directly In Markup with the “Use” Tag

P

Load an External SVG Inside a “Use” Tag

P

Style an SVG Icon with CSS

P

Build an SVG icon component in React

P
otherjs tutorial about Optimize SVGs for Better Performance using svgo

Optimize SVGs for Better Performance using svgo

2:03 otherjs PRO

Just like a bitmap image, you can compress an SVG by removing various pieces of code that aren’t necessary to it rendering properly. This reduces file size & download time, ultimately leading to a faster page load speed. You’ll learn how to automate the process of compressing your SVGs using svgo in the command line.

For a full list of options and plugins available to use with svgo, check out their documentation.

Note: This lesson assumes you have npm installed.

html5 tutorial about Include an SVG with an Image Tag

Include an SVG with an Image Tag

1:06 html5 PRO

Since an SVG is really just an image, it can be included on a page just like any other image, using an img tag. This is simple to implement, easy to resize and has the benefit of being cacheable.

There are a couple downsides to this approach, however. You can’t modify the SVG attributes such as fill or stroke; once the icon is included, there isn’t much you can do to change its appearance. Also, each icon you include creates an HTTP request, potentially impacting page load speed.

If you’re looking for an easy way to implement just a couple of icons that don’t need to change, this is a viable option.

html5 tutorial about Add an SVG as a Background Image

Add an SVG as a Background Image

1:32 html5

Learn how to set an SVG as the background image of an element. Background images can be resized by changing the width and height of the element containing background image, so it’s easy to create multiple sizes of the same icon.

However, each background image creates an HTTP request, so be aware of your page load speed. With this approach, you are unable to change attributes on the SVG such as fill or stroke.

If you want the ability to display icons at different sizes and don’t need to change their appearance or their interaction styles (such as on :hover), this could be a good option for you.

html5 tutorial about Add an SVG as an Embedded Background Image

Add an SVG as an Embedded Background Image

2:52 html5

Learn how to set an elements background image to embedded SVG. This method has an added benefit of not incurring any HTTP requests, as the SVG is simply embedded into the CSS. They can also be resized by changing the width and height of the element containing background image, so it’s easy to create multiple sizes of the same icon using this approach.

If you’re looking for the ability to display icons at different sizes and want to modify the SVG interaction styles (such as on :hover), this is could be a good option. One negative to adding the interaction styles is that it requires you to duplicate selectors and the SVG markup; the more icons you have, the larger your stylesheets will become.

otherjs tutorial about Combine Multiple SVGs into an SVG Sprite

Combine Multiple SVGs into an SVG Sprite

1:31 otherjs PRO

In this lesson, we’ll explore the process of combining all of your SVG icons into one SVG sprite, to be included directly into markup. We’ll use the command line, along with the svgo and svg-sprite-generator npm packages to automate the process of compressing the SVGs and creating the sprite.

Note: This lesson assumes you have npm installed.

html5 tutorial about Add an SVG Sprite as a Background Image

Add an SVG Sprite as a Background Image

4:11 html5 PRO

Learn how to use an SVG sprite to display your icons. Sprites are great because they add only a single HTTP request, are easy to add to markup and can be sized easily with the help of the background-size property.

This is a good option if you know the icons aren’t going to change much and you don’t mind manually editing the SVG sprite.

However, adding/editing icons once a sprite is created is cumbersome to do by hand, because you have to know the size and position of each icon and modify accordingly.

css tutorial about Automate SVG Sprite Background Image Variations with a SCSS Mixin

Automate SVG Sprite Background Image Variations with a SCSS Mixin

4:12 css PRO

n this lesson, you’ll learn how to write a SCSS mixin to generate styles for variations of background-images. We’ll look at using SCSS lists to interpolate dynamic class names and property attributes and output icons at different sizes.

If you need the ability to add or edit icons on a regular basis, having a SCSS mixin do the heavy lifting of calculating background-position, background-size and creating selectors will save you lots of time and manual work.

Note: this lesson assumes you have an understanding of SCSS, mixins and already have a process to compile SCSS.

html5 tutorial about Embed SVG Directly In Markup with the “Use” Tag

Embed SVG Directly In Markup with the “Use” Tag

1:49 html5 PRO

In this lesson, we’ll learn how to embed an SVG sprite into markup and reference it throughout the page using the SVG “use” tag and fragment identifiers.

This has become the standard way of displaying SVG icons because of the ability to dynamically style individual parts (especially interaction states). Also, because the SVG is just markup embedded on the page, it creates no extra HTTP requests. However, the block of SVG needs repeating on every page where icons are used.

html5 tutorial about Load an External SVG Inside a “Use” Tag

Load an External SVG Inside a “Use” Tag

1:38 html5 PRO

Learn how to load a single SVG icon set from an external URL in order to take advantage of caching. This has the added benefit of not needing to include the same chunk of SVG on every page where icons are displayed. Since it’s the same resource being requested for each icon, the browser can cache the file as well.

Note: The SVG must be hosted on the same domain as the requested page.

Some older/less feature complete browsers don’t support this functionality. If you only care about the latest browsers, you can get away with not using a JavaScript polyfill (but you should still provide some sort of fallback). However, the svgxuse polyfill can help provide a cross browser experience, with the added necessity of a JavaScript dependency.

css tutorial about Style an SVG Icon with CSS

Style an SVG Icon with CSS

3:17 css PRO

In this lesson, you’ll learn how to create interactive and multi-colored SVG icons using only CSS. You’ll also see how the same familiar rules of inheritance and specificity apply when working with SVG. We’ll style icons on hover, change their size and style individual parts of an icon.

When implementing SVG icons with the use tag, the browser renders the SVG inside something called the "shadow dom". Unfortunately, most browsers do not support accessing child elements of the shadow dom via CSS. In order to target elements inside a use tag, such as a path, you can target it at the global CSS level, like so:

path#rain {
/* styles */
}

Instead of:

.Icon--umbrella path#rain {
  /* styles */
}
react tutorial about  Build an SVG icon component in React

Build an SVG icon component in React

3:51 react PRO

Learn one way to render SVG icons as a React component. You’ll learn about the dynamic nature of SVG by passing props to a component that modify the icons properties such as colors and size.

You'll learn how to set up a stateless functional component, set up prop types and add a set of default props.

One benefit to building an individual icon component is that only the SVG markup needed for that icon will be rendered, instead of having to load an entire set of icons and only using one of them. Also, different attributes can be overridden using props, making theming and integration simple.

Presented by:

Damon Bauer

Front End Developer from Nashville, TN. Pretend woodworker. Mountain bike poseur. Coffee snob.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?