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.
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
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
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