This post is just a summary repost of Magento2 icons with their variable names. First of all, it’s useful to me because I always end up trying them all until I find the icon I need. I hope it can be useful for someone else too.

In This Article:

• List of basic icons
• How to use icons in Magento2

List of basic icons

These are all the icons included in the Luma and Blank themes. If you just want to know how to use them, jump to the next paragraph

Image	Less Variable	Content
	@icon-wishlist-full	‘\e600’
	@icon-warning	‘\e602’
	@icon-update	‘\e603’
	@icon-trash	‘\e604’
	@icon-star	‘\e605’
	@icon-settings	‘\e606’
	@icon-pointer-down	‘\e607’
	@icon-next	‘\e608’
	@icon-menu	‘\e609’
	@icon-location	‘\e60a’
	@icon-list	‘\e60b’
	@icon-info	‘\e60c’
	@icon-grid	‘\e60d’
	@icon-comment-reflected	‘\e60e’
	@icon-collapse	‘\e60f’
	@icon-checkmark	‘\e610’
	@icon-cart	‘\e611’
	@icon-calendar	‘\e612’
	@icon-arrow-up	‘\e613’
	@icon-arrow-down	‘\e614’
	@icon-search	‘\e615’
	@icon-remove	‘\e616’
	@icon-prev	‘\e617’
	@icon-pointer-up	‘\e618’
	@icon-pointer-right	‘\e619’
	@icon-pointer-left	‘\e61a’
	@icon-flag	‘\e61b’
	@icon-expand	‘\e61c’
	@icon-envelope	‘\e61d’
	@icon-compare-full	‘\e61e’
	@icon-compare-empty	‘\e61f’
	@icon-comment	‘\e620’
	@icon-up	‘\e621’
	@icon-down	‘\e622’
	@icon-help	‘\e623’
	@icon-arrow-right-thin	‘\e624’
	@icon-arrow-left-thin	‘\e625’
	@icon-arrow-down-thin	‘\e626’
	@icon-account	‘\e627’
	@icon-gift-registry	‘\e628’
	@icon-present	‘\e629’

How to use icons in Magento2

The variables above can be used in the following mixin to include a base icon in your custom design.

.lib-icon-font(
   @_icon-font-content: @icon-star,
   @_icon-font-size: @icon-font__size,
   @_icon-font-line-height: @icon-font__line-height,
   @_icon-font-text-hide: @_icon-font-text-hide,
   @_icon-font-color: @icon-font__color,
   @_icon-font-color-hover: @icon-font__color-hover,
   @_icon-font-color-active: @icon-font__color-active,
   @_icon-font-margin: @icon-font__margin,
   @_icon-font-vertical-align: @icon-font__vertical-align,
   @_icon-font-position: @icon-font__position,
   @_icon-font-display: @icon-font__display
);

by applying the mixin to any dom element in a .less file, a pseudo-element will be applied to it (after or before depending on the @_icon-font-position parameter).

It’s not mandatory to use all the parameters, you can also include only those you need and the others will just have the default value.

Sometimes you will need to set a global value for all icons in your theme. In that case you don’t have to touch the mixin you can just set a global variable. For example if you want a custom font size for all the icons, you will just do:

@icon-font__size: 35px;

It’s also possible to use this same mixin with another icon font of your choice. Just add it as @_icon-font as a parameter:

.lib-icon-font(
  @_icon-font: @custom-icon-font
  ...
);