Including icons on the web is nowadays a pain in the neck. Not because it's difficult, but because there are really plenty of options to choose. For example, some of the most used icon kits are:
- Font Awesome
- Linecons
- Zondicons
- Typicons
- Material Icons
These are really just a few of all the possible options that you have to include icons in your web apps. Most of them are available in formats like TTF, OTF, WOFF, EOT & SVG. Depending on your needs you may need one format or another. In my case, I use SVG as it's pretty lightweight and I don't need all of the advantages of using icons as fonts as I don't mix the icons with text. Besides, using SVG icons over other formats is really an advantage when you speak about the performance of the website as it's really lightweight, you don't need to load +200KB of the Font kits to include just a few icons from that huge collection that you won't use, with SVG you can simply choose which ones do you want to add and that's it. A lot of developers don't know about the awesome <defs> element that is used to store graphical objects that will be used at a later time, not right away. They can be later referenced through an use element inside a SVG element.
The main goal of SVG based icons is to define vector-based graphics in XML format. They're becoming a new lightweight standard for web fonts as well as images. In this article, I will explain to you how to easily create your own lightweight SVG Icon System using multiple icons from different Font Kits.
Advantages of this approach
- Extremely lightweight: include by yourself only the icons that you will use on your project instead of loading the whole library of icons.
- SVG based: your icons will look so sharp as always.
1. Visit IcoMoon App
The IcoMoon online app is is a free service, built with the idea of making easy to create your own pixel perfect icons collection. Once you open the web app, you will find a significant collection icons. In this interface, you only need to search and select the ones you need to add to your collection:
The application it's really useful, so I recommend you to explore and discover more features by yourself, as importing new Font Kits, exporting only the icons that you want in a Font format etc.
2. Select Icons and generate SVG
In this case, I'm going to build a collection with social icons. Once you have them in your collection, simply click on Generate SVG & More at the bottom of the website and you will see the collection of the selected icons. In this window, click on the SVG defs size link:
A new window will appear with the SVG that you need to include in your website. Depending on what you picked, the HTML will look something like this:
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-whatsapp" viewBox="0 0 24 28">
<path
d="M15.391 15.219c0.266 0 2.812 1.328 2.922 1.516 0.031 0.078 0.031 0.172 0.031 0.234 0 0.391-0.125 0.828-0.266 1.188-0.359 0.875-1.813 1.437-2.703 1.437-0.75 0-2.297-0.656-2.969-0.969-2.234-1.016-3.625-2.75-4.969-4.734-0.594-0.875-1.125-1.953-1.109-3.031v-0.125c0.031-1.031 0.406-1.766 1.156-2.469 0.234-0.219 0.484-0.344 0.812-0.344 0.187 0 0.375 0.047 0.578 0.047 0.422 0 0.5 0.125 0.656 0.531 0.109 0.266 0.906 2.391 0.906 2.547 0 0.594-1.078 1.266-1.078 1.625 0 0.078 0.031 0.156 0.078 0.234 0.344 0.734 1 1.578 1.594 2.141 0.719 0.688 1.484 1.141 2.359 1.578 0.109 0.063 0.219 0.109 0.344 0.109 0.469 0 1.25-1.516 1.656-1.516zM12.219 23.5c5.406 0 9.812-4.406 9.812-9.812s-4.406-9.812-9.812-9.812-9.812 4.406-9.812 9.812c0 2.063 0.656 4.078 1.875 5.75l-1.234 3.641 3.781-1.203c1.594 1.047 3.484 1.625 5.391 1.625zM12.219 1.906c6.5 0 11.781 5.281 11.781 11.781s-5.281 11.781-11.781 11.781c-1.984 0-3.953-0.5-5.703-1.469l-6.516 2.094 2.125-6.328c-1.109-1.828-1.687-3.938-1.687-6.078 0-6.5 5.281-11.781 11.781-11.781z">
</path>
</symbol>
<symbol id="icon-instagram" viewBox="0 0 24 28">
<path
d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM18.156 14c0 3.406-2.75 6.156-6.156 6.156s-6.156-2.75-6.156-6.156 2.75-6.156 6.156-6.156 6.156 2.75 6.156 6.156zM19.844 7.594c0 0.797-0.641 1.437-1.437 1.437s-1.437-0.641-1.437-1.437 0.641-1.437 1.437-1.437 1.437 0.641 1.437 1.437zM12 4.156c-1.75 0-5.5-0.141-7.078 0.484-0.547 0.219-0.953 0.484-1.375 0.906s-0.688 0.828-0.906 1.375c-0.625 1.578-0.484 5.328-0.484 7.078s-0.141 5.5 0.484 7.078c0.219 0.547 0.484 0.953 0.906 1.375s0.828 0.688 1.375 0.906c1.578 0.625 5.328 0.484 7.078 0.484s5.5 0.141 7.078-0.484c0.547-0.219 0.953-0.484 1.375-0.906s0.688-0.828 0.906-1.375c0.625-1.578 0.484-5.328 0.484-7.078s0.141-5.5-0.484-7.078c-0.219-0.547-0.484-0.953-0.906-1.375s-0.828-0.688-1.375-0.906c-1.578-0.625-5.328-0.484-7.078-0.484zM24 14c0 1.656 0.016 3.297-0.078 4.953-0.094 1.922-0.531 3.625-1.937 5.031s-3.109 1.844-5.031 1.937c-1.656 0.094-3.297 0.078-4.953 0.078s-3.297 0.016-4.953-0.078c-1.922-0.094-3.625-0.531-5.031-1.937s-1.844-3.109-1.937-5.031c-0.094-1.656-0.078-3.297-0.078-4.953s-0.016-3.297 0.078-4.953c0.094-1.922 0.531-3.625 1.937-5.031s3.109-1.844 5.031-1.937c1.656-0.094 3.297-0.078 4.953-0.078s3.297-0.016 4.953 0.078c1.922 0.094 3.625 0.531 5.031 1.937s1.844 3.109 1.937 5.031c0.094 1.656 0.078 3.297 0.078 4.953z">
</path>
</symbol>
<symbol id="icon-facebook-official" viewBox="0 0 24 28">
<path
d="M22.672 2c0.734 0 1.328 0.594 1.328 1.328v21.344c0 0.734-0.594 1.328-1.328 1.328h-6.109v-9.297h3.109l0.469-3.625h-3.578v-2.312c0-1.047 0.281-1.75 1.797-1.75l1.906-0.016v-3.234c-0.328-0.047-1.469-0.141-2.781-0.141-2.766 0-4.672 1.687-4.672 4.781v2.672h-3.125v3.625h3.125v9.297h-11.484c-0.734 0-1.328-0.594-1.328-1.328v-21.344c0-0.734 0.594-1.328 1.328-1.328h21.344z">
</path>
</symbol>
<symbol id="icon-youtube-play" viewBox="0 0 28 28">
<path
d="M11.109 17.625l7.562-3.906-7.562-3.953v7.859zM14 4.156c5.891 0 9.797 0.281 9.797 0.281 0.547 0.063 1.75 0.063 2.812 1.188 0 0 0.859 0.844 1.109 2.781 0.297 2.266 0.281 4.531 0.281 4.531v2.125s0.016 2.266-0.281 4.531c-0.25 1.922-1.109 2.781-1.109 2.781-1.062 1.109-2.266 1.109-2.812 1.172 0 0-3.906 0.297-9.797 0.297v0c-7.281-0.063-9.516-0.281-9.516-0.281-0.625-0.109-2.031-0.078-3.094-1.188 0 0-0.859-0.859-1.109-2.781-0.297-2.266-0.281-4.531-0.281-4.531v-2.125s-0.016-2.266 0.281-4.531c0.25-1.937 1.109-2.781 1.109-2.781 1.062-1.125 2.266-1.125 2.812-1.188 0 0 3.906-0.281 9.797-0.281v0z">
</path>
</symbol>
<symbol id="icon-linkedin" viewBox="0 0 24 28">
<path
d="M5.453 9.766v15.484h-5.156v-15.484h5.156zM5.781 4.984c0.016 1.484-1.109 2.672-2.906 2.672v0h-0.031c-1.734 0-2.844-1.188-2.844-2.672 0-1.516 1.156-2.672 2.906-2.672 1.766 0 2.859 1.156 2.875 2.672zM24 16.375v8.875h-5.141v-8.281c0-2.078-0.75-3.5-2.609-3.5-1.422 0-2.266 0.953-2.641 1.875-0.125 0.344-0.172 0.797-0.172 1.266v8.641h-5.141c0.063-14.031 0-15.484 0-15.484h5.141v2.25h-0.031c0.672-1.062 1.891-2.609 4.672-2.609 3.391 0 5.922 2.219 5.922 6.969z">
</path>
</symbol>
</defs>
</svg>Note that the generated code is a SVG element itself that remains hidden. Now, wherever you want to add one of the selected icons, you only need to embed the following SVG code, replacing the referenced element with the id of the icon, for example to display the facebook icon:
<svg class="icon"><use xlink:href="#icon-facebook-official"></use></svg>And that's it! Feel free to build now your own icons collection in your projects. You can see a live example in the following fiddle (open the result tab):
Note that you can customize them with CSS in the way you want, changing the fill color and the size.
Happy coding ❤️!
