Engine23
blogBannerImage
By Engine23

How to customize Icon Font for Magento

How to use a custom Icon Font in your Magento 2 theme

update the icon variables in Magento.

The update is pretty simple, if you know the exact steps. Here’s a quick synopsis: You start by creating a custom theme less file, and then update the Icon Font variables. Don't forget to clear the appropriate caches and it's that simple.

Why update the font Icon instead of simply using an image?


None vector images don’t scale well and require additional http requests for each image, further slowing load times. Along with images tending to be larger in size. Not to mention your base theme's icon font will still be loaded and partially unused if you take the shortcut of replacing an icon with an image!

Who is this tutorial for?


Any developers, designers, DIY business-owners or web-moguls who just needs to change the icon set for their Magento site and has had experience updating Magento theme less.

First, if you don't have your custom font, check out how to create a Magento Icon Font here.


You will also need to of created a custom theme and created an _theme.less file to update theme less variables.

A little tip, if you're getting the error "". Add the following lines to the top of your _theme.less file: @import (reference) "../source/lib/variables/_responsive.less"; @import (reference) "../source/lib/_responsive.less";

And finally on to the actual changes to override the base theme's icon font. You update @icons__font-path and @icons__font-name. Then clear your block, page, css asset, and browser cache for your changes to show. Sometimes I get boxes instead of icons and still have to refresh 2-3 times for everything to work. // Path @icons__font-path: "@{baseDir}fonts/Custom-Theme-Icons/Custom-Theme-Icons"; // Names @icons__font-name: 'icons-custom-theme';

Final step is to add the icon files