​Take Control of SVG Icons

SVG has a lot of potential for web design, but most icons are simply uploaded as SVG images because of their vector properties. That’s a waste, because there’s so much more that can be done with an HTML embed!

Manipulating SVGs with HTML and CSS is extremely easy. It also saves a lot of time and file exporting when you’re working on a website layout.

For this walkthrough we’ll take a look at one of the icons from the Creative Things 2.0 icon set. I’ve just recently updated the SVG files in that set to be extremely easy to edit.

If you’d like to follow along (and I highly recommend you do!) You can open up this CodePen and follow along. It doesn’t look quite right at the moment but we’ll work on that.

I also want to quickly mention that if you’re not a web design wizard, I don’t claim to be either. But this walkthrough will be some really good and risk free HTML and CSS practice.

camera icon

1. Open the File in a Text Editor

There are a lot of text editor options out there for coding. If you already have the CodePen open there’s no need to download anything else, but I use and highly recommend Sublime Text as an editor if you don’t have one installed already.

To get the HTML we’re starting with, I’ve simply opened the SVG using Sublime Text and copied the HTML. Here’s what the icon looks like without any adjustments.

Pretty messy, right? It looks unorganized and kind of intimidating. So let’s clean this up real quick and see what we have to work with.

2. Make the HTML more readable

After a couple of quick adjustments, the HTML will start too look a lot better.

If you’re still not quite sure what you’re looking at, here’s a quick breakdown of what’s included in this file:

  • <svg></svg> – contains the icon, which currently has an ID, a data name, and a viewBox (the size of the original artboard in Illustrator)
  • <title></title> – Sets the name of the icon. This is useful for accessibility but isn’t something that we’ll need to adjust.
  • <path></path> – Defines how the path should be drawn. If these just seem like a lot of random numbers and letters, that’s fine. We won’t be working with them but it’s good to know what they’re there for.
  • style=“” – Inline styles are included with the path. I’ve put them all on individual lines to make this a little easier to read, but we’ll be working more with them soon.

3. Add a CSS Class to The Icon

To break this down simply, a class can be applied to multiple icons, while an id can only belong to one icon on the page.

Currently our icon has an id, which is great. This means we can select that icon at any time and change it specifically. We’ll leave it there, but for the purposes of this example, we’ll be adding and using a class.

I’ve given this icon a class of .ct-icons (to represent Creative Things icons) and an ID of #icon-camera (starting with icon helps keep things organized).

We can also further cleaned up the HTML by removing a few things we don’t really need:

  • data-name="Layer 1" 
  • xmlns="http://www.w3.org/2000/svg" 

The remaining viewBox property is important because it helps contain the icon and keep it fixed to a square box.

5. Move Styles to CSS

Now that we’ve cleaned everything up, let’s move the inline styles to CSS to make the icon styles more flexible. You may have a stylesheet for your website already, but for the purposes of this tutorial, I’m going to start a new file with only the icon CSS.

Start by declaring both the .ct-icons class and #icon-camera ID. These two will help us style this single icon and future icons added to the page.

You may notice at this point that the icon grows infinitely. We’ll want to adjust that and make sure the icon has a proper container by adding width: to the .ct-icons class in our CSS, as well as copying and pasting the inline styles from the HTML.

6.Make Adjustments

Now comes the fun part! Your SVG icon is ready to be altered. Here are a few of the things you can do:

  • Adjust the thickness by changing the stroke-width: ;  property.
  • Change the color by changing the stroke: ; property.
  • Add a hover state by adding a :hover selector to .ct-icons

Remember, any of these changes can be made to either a collection of icons using the class .ct-icons or specifically this icon using the id#icon-camera

And there you go! A completely styled SVG fie. We broke down the code into easy to reach bits, simplified the markup, and styled the icon in just a few lines of CSS.

As you can probably imagine, there are a lot of uses for this. Entire sets of icons can be styled quickly and easily with this method. And as I mentioned at the beginning of this article, I’ve update the Creative Things icon set to include highly editable SVG.

Do you want whole set of icons that’s this flexible?

Creative Things 2.0 is built for flexibility and ease of use. Not only does it include SVG files like the one we just worked with in this article, it also includes PNG files, a custom icon font, and files for Sketch, Illustrator, and Figma.

Do you want whole set of icons that’s this flexible?

Creative Things 2.0 is built for flexibility and ease of use. Not only does it include SVG files like the one we just worked with in this article, it also includes PNG files, a custom icon font, and files for Sketch, Illustrator, and Figma.

Cart

Your cart is currently empty.

Your cart is currently empty.

Return To Shop