How to Upload and Animate SVG Icons in 3 Simple Steps

In this tutorial, we will show you how to implement Scalable Vector Graphic (SVG) icons on your site in a few easy steps, and we’ll explain how you can take your icons to the next level with animations.

Recently, we provided a great list of websites where you can download icon packs and explained how iconography can be used to effectively communicate with your visitors. Not only can icons enhance your site’s overall design, but they can be effectively used as tools to increase readability, highlight important content, and reinforce functionality or features.

In this post, we will show you how to implement Scalable Vector Graphic (SVG) icons on your site in a few easy steps, and we’ll explain how you can take your icons to the next level with animations.

You might also like: Designing with SVG: How Scalable Vector Graphics Can Increase Visitor Engagement

Why you should use SVG icons

When you start a new web project, you should always be thinking about the devices that run the web and that the web itself is ever-changing. While you can’t predict the future, you should always look for strategies to future-proof your web projects as best as you can.

This is where SVG icons can help. Since SVGs are vector graphics, they are a great way to future-proof your site since they can scale from 20px by 20px to 1000px by 1000px without losing clarity. Plus, they are screen resolution independent meaning that they will retain their image quality without becoming pixelated on any screen resolution. Not too long ago, devices had very low resolution displays. Back then, we couldn’t have imagined the beautiful, high-density displays we now carry around in our pockets. As this progress continues, with recent developments such as the release of 4K displays, we must think proactively about our designs.

By using SVG icons, you’re ensuring that your design will look great on any screen while maintaining a small file size. This is what makes SVGs unique compared to JPGs and PNGs, which require additional copies of the image file and sometimes extra javascript to determine which resolution should be displayed. Clearly, this is neither effective nor efficient.

One of the many other benefits of using an SVG icon is that you can edit its size and colour via CSS. You can also animate them too. In this tutorial, we’ll be using icons from icons8.com (this resource provides free icon packs provided that you credit their site). To follow along, simply download the sample code provided.

Step 1: Downloading the SVG icon

Icons8 provides HTML to implement SVG icons. This is the fastest and easiest way to add an icon to your site, and you won’t be required to upload an SVG file to your server. In this example, we will show you how to add a Facebook icon to your site.

To access the icon below icon, visit this page.

Click on the “Generate HTML” button below the icon. This will show a pop-up window with HTML that you can copy and paste into your HTML file.

 

Copy and paste the HTML into your HTML page.

Add the CSS provided by Icon8 to your CSS File.

Preview your page to see the Facebook SVG Icon. 

Step 2: Styling the SVG icon

Changing the CSS fill attribute to “fill: #96BE4F;” changes the Facebook icon’s colour without any additional work.

If you do not have access to the CSS file on your site, you can add inline styles on your HTML page by adding a < style > tag:

Alternatively, you can use the Icons8 colour picker to select a colour for the Facebook icon.

3. Animating the SVG icon

To animate SVG icons, we’re going to use a great Javascript library called Vivus. Vivus provides several out of the box animations and plenty of customization capabilities. To show you a quick example, we’ve animated the outlines of the Facebook icon. You can see the finished result below:

Vivus provides a great set of documentation, but we will keep things simple. We will include the vivus.js file in our html and add the following call:

To view the animated icon, simply refresh your page. If you’d like to customize your animations or view other presets, visit the Vivus.js Github page.

Start using icons in your designs

I hope that this post has shown you how easy it is to add an SVG icon to your site and animate it using just a few lines of code and a javascript library. By following the three steps outlined in this tutorial, you are now able to create a great user experience while future-proofing your site and saving time along the way.

Have any questions about this tutorial? Let me know in the comments. 

You might also like: How to Build Amazing Web Design Animations — No Programming Required