Switch Away from Icon Fonts to SVG

This has been busy month for WordPress talks. First freelance talk in WordPress Helsinki meetup, today SVG talk in WordPress Cafe hosted by Exove, and finally talk about accessibility in Turku WordPress meetup.

Today topic was switching away from icon fonts to SVG. You can check the slides from here.

We talk about these subjects:

• Why use SVG icons instead of icon fonts.
• How to create SVG icons.
• How to use SVG icons.
• Couple of practical examples.

Edit: Now the talk is also in Youtube.

Here is a short overview of those subjects.

Why use SVG instead of icon fonts

You can use definitely use icon fonts, just use them accessible way. But in many ways SVGs are better than icon fonts outlined in CSS tricks article. I love Github summarize why they made the switch.

By switching from icon fonts, we can serve our icons more easily, more quickly, and more accessibly. And they look better. Enjoy.

Where to get SVG icons

From your designer of course! I personally use service called Icomoon App where you can import any font icon or SVG image. App auto-generates SVG icons and SVG sprite for you. You can also use Grunt or Gulp tools, wd_s starter theme have great example of using Gulp.

Also read Sara Soueidan article about switching away from icon font to SVG. Actually read everything she has written about SVGs. She’s like Houdini of SVGs.

How to use SVG icons

There are several methods to embed SVG. Starting from <img src="my-svg.svg">. We talked about inline and external SVG sprite systems, checked SVG social menu demo, and SVG menu hamburger animation.

Here is the link to slides once more. I suggest that you try SGVs in your next project. I certainly have lot to learn but you got to start somewhere. Cheers!