How To In Magento 2 – How To Add Custom Icons?

Today we will talk about how to add custom icons into Magento 2 project. I have noticed it is one of the most popular topic lately. Let me just show you how to add your own custom icons in easy and fast way. First of all check out this Magento documentation about fonts. If you need any help, book with me 1hr Magento 2 Frontend consultation or learn more about starting work with Magento 2!

In order to add custom icons in Magento 2 I would recommend to use IcoMoon. Add icons as font rather than images. In order to generate font, you will need to have icons in svg fill format. Please, see the documentation how to convert strokes to fill. The next step is to upload and select icons, generate font and add to the project app/design/frontend/<Vendor>/<theme>/web/fonts/

Notice, that you will need to generate woff2 version as it is not included in IcoMoon zip, use some online convertors.

The next step is to create _typography_extend.less file with following content:

body { 
  .lib-font-face( 
    @family-name:'Icomoon', 
    @font-path: '@{baseDir}fonts/icomoon/icomoon', 
    @font-weight: @font-weight__light, 
    @font-style: normal 
  ) 
}

Remember to add_typography_extend.less to _extend.less file. See my last post How In Magento2 – How To Start?

Notice, that @font-weight__light is already defined. fonts/icomoon is directory where you can find font files named icomoon.xxx in different formats. All font files should have the same name.

As Magento2 has already icons as font, you will need to overwrite current icon font in _theme.less by adding following lines:

//
//  Icons
//  ---------------------------------------------

@icons__font-path: "@{baseDir}fonts/icomoon/icomoon";
@icons__font-name: 'icomoon';
@icon-font__size: 2.2rem;

Notice that all new icons variables should be defined in _variables.less file. For example:

//
//  Icons
//  ---------------------------------------------

@icon-fb: '\e900';
@icon-twitter: '\e904';
@icon-yt: '\e905';
@icon-pinterest: '\e902';

SUBSCRIBE TO MAGENTO 2 NEWSLETTER!

Would you like to get information when new Magento tutorial is available?
Subscribe to the newsletter and be up to date!

MORE MAGENTO 2 TUTORIALS

How To In Magento 2 – How To Add Additional Dropdown With Options Based On Selected Shipping Methods In The Checkout

How To In Magento 2 – How To Display Additional Text Based On Selected Shipping Methods In The Checkout

JOIN THE GROUP ON FACEBOOK!

PIN ME!

I hope it can help with your journey with M2! Also feel free to give your feedback and advices. Did you find this post useful? I would be more than happy if you share it with your friends, maybe someone else will find it useful as well. Good luck!

Zaneta Baran

Zaneta loves challenges so deciding about career path she has chosen typical male industry. Woman who codes. Every 1-2 years she lives in different part of the world. Gym dates is something what she specialised in. Healthy lifestyle, extreme sports and motorbikes have stolen her hear years ago.