Adding SVG icons and graphics to your WordPress theme

Update: I no longer recommend this method and will write a future post about it. In short, I am using a modified version of the code from the Twentynineteen theme vs the Twentyseventeen theme.

In the previous post, I shared how I modified the SVG Social Icons functionality in the Twentyseventeen theme to display the social menu using the Custom menu widget.

Since that time, I’ve come across a plugin in the WordPress repository called SVG Social Menu that adds that functionality to any WordPress theme, including Genesis.

So if you are looking just to add SVG icons for social media and prefer to use a menu this would be a great place to start. Another option is the Simple Social Icons plugin which does use SVG icons through a widget — not a menu, but has some limitations as you can not easily reorder them. In my opinion, a menu makes better sense, semantically and programmatically.

Now if you are interested in creating an icon system to use SVG not only in your menu but throughout your theme for design elements, within content areas, and inline them programmatically — a custom solution is in order.

Adding SVG elements to your theme

While I am writing and testing this solution for the Genesis Sample child theme, this can easily be adapted to work with any WordPress theme.

Adding SVG icons and graphics to your Genesis child theme can be done by copying the code from the icon-functions.php and including the SVG sprite from the Twentyseventeen theme. I’ve made a few modifications to the code to tailor it for my theme.

Step 1. Add the SVG sprite.

First thing is to add an SVG sprite to the child theme. An SVG sprite is a file that contains a collection of individual graphical elements.

The one I am using for this tutorial is the one included with the Twentyseventeen theme. I have the included the original and a minified version so you can download and add to your images folder.

I added both of these to my images folder.

Download these from Github.

Step 2. Add icon-functions.php in your child theme /lib/ folder

Step 3. Include icon-functions.php in your functions.php

Add this snippet of code to your function.php file.

Step 4. Inline the SVG sprite.

The icon-functions.php handles inlining the SVG sprite for us just before the closing body tag. With all of the icons inline, we can display them anywhere on the page without a separate HTTP request — and that shortens page load time.

With all the code in place, all we need to do is create a social icon menu and choose where to display it.

The name of the menu is very important as it must match the generated slug I am using in the code.

Wrapping Up

So there you have it. A simple social menu icon system that you can assign to a menu location and also use in a Custom Menu widget. The beauty of this method is that it opens the door to using the icons and graphics in lots of other ways within your content or design.

One simple way is to reference it directly within the text editor of your post with something like this:

I’ve wrapped an SVG element within a element that references the SVG with an href attribute for a specific icon ID. I’ve included some classes and a simple hover animation to the icons below to produce this: