# Icons

Icons can be represented by using the fonts, images, or sprites.

An icon can be added to any HTML tag. For this purpose you need to use additional `<span>` tag within your tag. This additional tag serves for displaying an icon without visible text, thus following the accessibility requirements. Then you need to apply appropriate `icon` mixin for this tag's class. Icon can be added both before and after element's text. Also, icon can be displayed instead of element's text (in this case the text is hidden).

There are two ways to insert icon: first you can use sprite or image, second you can use an icon font. Magento UI library provides mixins for both of them.

<a href="#" class="example-icon-1"><span>sprite icon before the text</span></a> <br> <a href="#" class="example-icon-2"><span>sprite icon after the text</span></a> <br> <a href="#" class="example-icon-3" title="sprite icon instead of the text"><span>icon instead of the text</span></a> <br> <a href="#" class="example-icon-4"><span>font icon before the text</span></a> <br> <a href="#" class="example-icon-5"><span>font icon after the text</span></a> <br> <a href="#" class="example-icon-6" title="font icon instead of the text"><span>icon instead of the text</span></a>

    .example-icon-1 {
        .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png');
    }

    .example-icon-2 {
        .lib-icon-image(
            @_icon-image: '@{baseDir}images/blank-theme-icons.png',
            @_icon-image-position-x: -26px,
            @_icon-image-position-y: 0,
            @_icon-image-position: after
       );
    }

    .example-icon-3 {
        .lib-icon-image(
            @_icon-image: '@{baseDir}images/blank-theme-icons.png',
            @_icon-image-position-x: -156px,
            @_icon-image-position-y: -52px,
            @_icon-image-text-hide: true
       );
    }

    .example-icon-4 {
        .lib-icon-font(
            @_icon-font-content: @icon-settings,
            @_icon-font-size: 24px
       );
    }

    .example-icon-5 {
        .lib-icon-font(
            @_icon-font-content: @icon-star,
            @_icon-font-size: 24px,
            @_icon-font-position: after
       );
    }

    .example-icon-6 {
        .lib-icon-font(
            @_icon-font-content: @icon-flag,
            @_icon-font-size: 24px,
            @_icon-font-text-hide: true
       );
    }

# Icon with image or sprite

the `.lib-icon-image()` mixin is used to create icons using single image or sprite. It has one mandatory parameter - `@_icon-image`. This parameter accepts the path to an image or sprite.

<a href="#" class="example-icon-7"><span>icon-search</span></a>

    .example-icon-7 {
        .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png');
    }

# Icon with image or sprite variables

            Mixin variable
            Default value
            Allowed values
            Comment

            @_icon-image
            -
            '' | false | value
            A link to an image or sprite, mandatory parameter

            @_icon-image-height
            26px
            '' | false | value
            Icon image height

            @_icon-image-width
            26px
            '' | false | value
            Icon image width

            @_icon-image-margin
            0
            '' | false | value
            Icon image margin

            @_icon-image-vertical-align
            middle
            '' | false | value
            Icon image vertical align

            @_icon-image-position-x
            0
            '' | false | value
            Horizontal image position

            @_icon-image-position-y
            0
            '' | false | value
            Vertical image position

            @_icon-image-position
            before
            before | after
            Icon image position

            @_icon-image-text-hide
            false
            true | false
            The text in the <span> tag should be hidden

# Icon position for an icon with image or sprite

To change the position for icons with image the `.lib-icon-image-position()` mixin is used. By managing its `@_icon-image-position-x` and `@_icon-image-position-y` variables you can move the image on element's background. The `@_icon-image-position` variable is used to define the position of icon (before or after the element).

<a href="#" class="example-icon-8"><span>icon-star</span></a> <br> <a href="#" class="example-icon-9"><span>icon-heart</span></a>

    .example-icon-8 {
        .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png');
        .lib-icon-image-position(
            @_icon-image-position-x: -182px
       );
    }

    .example-icon-9 {
        .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png', @_icon-image-position: after);
        .lib-icon-image-position(
            @_icon-image-position-x: -52px,
            @_icon-image-position-y: -26px,
            @_icon-image-position: after
       );
    }

# Position for icon with image or sprite mixin variables

            Mixin variable
            Default value
            Allowed values
            Comment

            @_icon-image-position-x
            0
            '' | false | value
            Horizontal starting position of icon image

            @_icon-image-position-y
            0
            '' | false | value
            Vertical starting position of icon image

            @_icon-image-position
            -
            before | after
            Position of the icon which is set for the element

# Icon sprite position (with grid)

Mixin `.lib-icon-sprite-position()` is used to manage the position of sprite background image. It assumes the use of a single sprite image with individual images placed on a regular grid.

<a href="#" class="example-icon-10"><span>icon text</span></a>

    .example-icon-10 {
        .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png');
        .lib-icon-sprite-position(4, 0);
    }

# Icon sprite position variables

            Mixin variable
            Default value
            Allowed values
            Comment

            @_icon-sprite-position-x
            0
            '' | false | value
            The x coordinate of the desired image on the grid

            @_icon-sprite-position-y
            0
            '' | false | value
            The y coordinate of the desired image on the grid

            @_icon-sprite-grid
            26px
            '' | false | value
            The size of the grid (in pixels) that the individal images are placed on

            @_icon-sprite-position
            before
            before | after
            Icon image position

# Image/sprite icon size

Mixin `.lib-icon-image-size()` is used to change the image/sprite icon size

<a href="#" class="example-icon-11"><span>icon-search</span></a>

    .example-icon-11 {
        .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png');
        .lib-icon-image-size(30px, 30px);
        &:before {
            background-color: #f1f1f1;
        }
    }

# Image/sprite icon size variables

            Mixin variable
            Default value
            Allowed values
            Comment

            @_icon-image-width
            26px
            '' | false | value
            Icon image width

            @_icon-image-height
            26px
            '' | false | value
            Icon image height

            @_icon-image-position
            before
            before | after
            Icon image position

# Font icon

The `.lib-icon-font()` mixin is used to create icons using font icons. It has one mandatory parameter - `@_icon-font-content`. This parameter accepts the font icon code.

<a href="#" class="example-icon-12"><span>icon-calendar</span></a>

    .example-icon-12 {
        .lib-icon-font(
            @icon-calendar,
            @_icon-font-size: 28px
       );
    }

# Font icon variables

            Mixin variable
            Default value
            Allowed values
            Comment

            @_icon-font-content

            '' | icon code | icon variables
            Font icon code

            @_icon-font
            @icons__font-name
            '' | false | value
            The icon font

            @_icon-font-size
            inherit
            '' | false | value
            Font icon size

            @_icon-font-line-height
            @icon-font__size
            '' | false | value
            Font icon line height

            @_icon-font-color
            inherit
            '' | inherit | color code
            Font icon color

            @_icon-font-color-hover
            false
            '' | inherit | color code
            Font icon color - hover state

            @_icon-font-color-active
            false
            '' | inherit | color code
            Font icon color - active state

            @_icon-font-margin
            @icon__margin
            '' | false | value
            Font icon margin

            @_icon-font-vertical-align
            @icon__vertical-align
            '' | false | value
            Font icon vertical align

            @_icon-font-position
            @icon__position
            before | after
            Font icon position

            @_icon-font-text-hide
            @icon__text-hide
            true | false
            The text of the element is replaced with the icon(true), or the icon is on the side of the text (false)

            @_icon-font-display
            inline-block
            '' | false | value
            The 'display' property of the icon container

# Change the size of font icon

The `.lib-icon-font-size()` mixin is used to change size of the font icon which is already defined. The mixin generates only new font size and line height without any other options. @_icon-font-position variable is used to define the position of icon (before or after the element) which we want to set font size of.

<a href="#" class="example-icon-13"><span>icon-calendar</span></a>

    .example-icon-13 {
        .lib-icon-font(@icon-calendar);
        .lib-icon-font-size(
            @_icon-font-size: 26px
       );
    }

# Change the size of font icon variables

            Mixin variable
            Default value
            Allowed values
            Comment

            @_icon-font-size
            inherit
            '' | false | value
            Font icon font size

            @_icon-font-line-height
            @icon-font__size
            '' | false | value
            Font icon line height

            @_icon-font-position
            before
            before | after
            Font icon - icon position

# Hide icon text

The `.lib-icon-text-hide()` mixin can be used separately to hide text of an element that has an icon text. This mixin accepts no variables.

<a href="#" class="example-icon-14"><span>icon-calendar</span></a>

    .example-icon-14 {
        .lib-icon-font(
            @icon-envelope,
            @_icon-font-size: 26px
       );
        .lib-icon-text-hide();
    }

# Sprite and font icons for Blank theme

You can use the icons designed to our Blank theme, which are also available in two variants: sprite and font

## Icons using sprite

<ul class="icons-image-list"> <li> <span class="icon-search"><span>icon-search</span></span> </li> <li> <span class="icon-cart"><span>icon-cart</span></span> </li> <li> <span class="icon-arrow-down"><span>icon-arrow-down</span></span> </li> <li> <span class="icon-arrow-up"><span>icon-arrow-up</span></span> </li> <li> <span class="icon-grid"><span>icon-grid</span></span> </li> <li> <span class="icon-list"><span>icon-list</span></span> </li> <li> <span class="icon-remove"><span>icon-remove</span></span> </li> <li> <span class="icon-star"><span>icon-star</span></span> </li> <li> <span class="icon-pointer-down"><span>icon-pointer-down</span></span> </li> <li> <span class="icon-pointer-up"><span>icon-pointer-up</span></span> </li> <li> <span class="icon-pointer-left"><span>icon-pointer-left</span></span> </li> <li> <span class="icon-pointer-right"><span>icon-pointer-right</span></span> </li> <li> <span class="icon-compare-empty"><span>icon-compare-empty</span></span> </li> <li> <span class="icon-compare-full"><span>icon-compare-full</span></span> </li> <li> <span class="icon-wishlist-empty"><span>icon-wishlist-empty</span></span> </li> <li> <span class="icon-wishlist-full"><span>icon-wishlist-full</span></span> </li> <li> <span class="icon-update"><span>icon-update</span></span> </li> <li> <span class="icon-collapse"><span>icon-collapse</span></span> </li> <li> <span class="icon-expand"><span>icon-expand</span></span> </li> <li> <span class="icon-menu"><span>icon-menu</span></span> </li> <li> <span class="icon-prev"><span>icon-prev</span></span> </li> <li> <span class="icon-next"><span>icon-next</span></span> </li> <li> <span class="icon-settings"><span>icon-settings</span></span> </li> <li> <span class="icon-info"><span>icon-info</span></span> </li> <li> <span class="icon-checkmark"><span>icon-checkmark</span></span> </li> <li> <span class="icon-calendar"><span>icon-calendar</span></span> </li> <li> <span class="icon-comment"><span>icon-comment</span></span> </li> <li> <span class="icon-comment-reflected"><span>icon-comment-reflected</span></span> </li> <li> <span class="icon-envelope"><span>icon-envelope</span></span> </li> <li> <span class="icon-warning"><span>icon-warning</span></span> </li> <li> <span class="icon-trash"><span>icon-trash</span></span> </li> <li> <span class="icon-flag"><span>icon-flag</span></span> </li> <li> <span class="icon-location"><span>icon-location</span></span> </li> <li> <span class="icon-up"><span>icon-up</span></span> </li> <li> <span class="icon-down"><span>icon-down</span></span> </li> </ul>

## Icons using font

<ul class="icons-font-list"> <li> <span class="icon-wishlist-full" data-icon=""><span>@icon-wishlist-full</span></span> </li> <li> <span class="icon-wishlist-empty" data-icon=""><span>@icon-wishlist-empty</span></span> </li> <li> <span class="icon-warning" data-icon=""><span>@icon-warning</span></span> </li> <li> <span class="icon-update" data-icon=""><span>@icon-update</span></span> </li> <li> <span class="icon-trash" data-icon=""><span>@icon-trash</span></span> </li> <li> <span class="icon-star" data-icon=""><span>@icon-star</span></span> </li> <li> <span class="icon-settings" data-icon=""><span>@icon-settings</span></span> </li> <li> <span class="icon-next" data-icon=""><span>@icon-next</span></span> </li> <li> <span class="icon-menu" data-icon=""><span>@icon-menu</span></span> </li> <li> <span class="icon-location" data-icon=""><span>@icon-location</span></span> </li> <li> <span class="icon-list" data-icon=""><span>@icon-list</span></span> </li> <li> <span class="icon-info" data-icon=""><span>@icon-info</span></span> </li> <li> <span class="icon-grid" data-icon=""><span>@icon-grid</span></span> </li> <li> <span class="icon-checkmark" data-icon=""><span>@icon-checkmark</span></span> </li> <li> <span class="icon-cart" data-icon=""><span>@icon-cart</span></span> </li> <li> <span class="icon-calendar" data-icon=""><span>@icon-calendar</span></span> </li> <li> <span class="icon-arrow-up" data-icon=""><span>@icon-arrow-up</span></span> </li> <li> <span class="icon-arrow-down" data-icon=""><span>@icon-arrow-down</span></span> </li> <li> <span class="icon-search" data-icon=""><span>@icon-search</span></span> </li> <li> <span class="icon-remove" data-icon=""><span>@icon-remove</span></span> </li> <li> <span class="icon-prev" data-icon=""><span>@icon-prev</span></span> </li> <li> <span class="icon-pointer-down" data-icon=""><span>@icon-pointer-down</span></span> </li> <li> <span class="icon-pointer-up" data-icon=""><span>@icon-pointer-up</span></span> </li> <li> <span class="icon-pointer-left" data-icon=""><span>@icon-pointer-left</span></span> </li> <li> <span class="icon-pointer-right" data-icon=""><span>@icon-pointer-right</span></span> </li> <li> <span class="icon-flag" data-icon=""><span>@icon-flag</span></span> </li> <li> <span class="icon-collapse" data-icon=""><span>@icon-collapse</span></span> </li> <li> <span class="icon-expand" data-icon=""><span>@icon-expand</span></span> </li> <li> <span class="icon-envelope" data-icon=""><span>@icon-envelope</span></span> </li> <li> <span class="icon-compare-empty" data-icon=""><span>@icon-compare-empty</span></span> </li> <li> <span class="icon-compare-full" data-icon=""><span>@icon-compare-full</span></span> </li> <li> <span class="icon-comment" data-icon=""><span>@icon-comment</span></span> </li> <li> <span class="icon-comment-reflected" data-icon=""><span>@icon-comment-reflected</span></span> </li> <li> <span class="icon-up" data-icon=""><span>@icon-up</span></span> </li> <li> <span class="icon-down" data-icon=""><span>@icon-down</span></span> </li> <li> <span class="icon-arrow-up-thin" data-icon=""><span>@icon-arrow-up-thin</span></span> </li> <li> <span class="icon-arrow-right-thin" data-icon=""><span>@icon-arrow-right-thin</span></span> </li> <li> <span class="icon-arrow-left-thin" data-icon=""><span>@icon-arrow-left-thin</span></span> </li> <li> <span class="icon-arrow-down-thin" data-icon=""><span>@icon-arrow-down-thin</span></span> </li> <li> <span class="icon-arrow-left-thin" data-icon=""><span>@icon-gift-registry</span></span> </li> <li> <span class="icon-arrow-down-thin" data-icon=""><span>@icon-present</span></span> </li> </ul>

    .icons-image-list {
        list-style: none;
        padding: 0;
        li {
            float: left;
            width: 33%;
            > span {
                .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png');
            }
            .icon-search {
                .lib-icon-sprite-position(0, 0);
            }
            .icon-cart {
                .lib-icon-sprite-position(1, 0);
            }
            .icon-arrow-down {
                .lib-icon-sprite-position(2, 0);
            }
            .icon-arrow-up {
                .lib-icon-sprite-position(3, 0);
            }
            .icon-grid {
                .lib-icon-sprite-position(4, 0);
            }
            .icon-list {
                .lib-icon-sprite-position(5, 0);
            }
            .icon-remove {
                .lib-icon-sprite-position(6, 0);
            }
            .icon-star {
                .lib-icon-sprite-position(7, 0);
            }
            .icon-pointer-down {
                .lib-icon-sprite-position(8, 0);
            }
            .icon-pointer-up {
                .lib-icon-sprite-position(9, 0);
            }
            .icon-pointer-left {
                .lib-icon-sprite-position(10, 0);
            }
            .icon-pointer-right {
                .lib-icon-sprite-position(11, 0);
            }
            .icon-compare-empty {
                .lib-icon-sprite-position(0, 1);
            }
            .icon-compare-full {
                .lib-icon-sprite-position(1, 1);
            }
            .icon-wishlist-empty {
                .lib-icon-sprite-position(2, 1);
            }
            .icon-wishlist-full {
                .lib-icon-sprite-position(3, 1);
            }
            .icon-update {
                .lib-icon-sprite-position(4, 1);
            }
            .icon-collapse {
                .lib-icon-sprite-position(5, 1);
            }
            .icon-expand {
                .lib-icon-sprite-position(6, 1);
            }
            .icon-menu {
                .lib-icon-sprite-position(7, 1);
            }
            .icon-prev {
                .lib-icon-sprite-position(8, 1);
            }
            .icon-next {
                .lib-icon-sprite-position(9, 1);
            }
            .icon-settings {
                .lib-icon-sprite-position(10, 1);
            }
            .icon-info {
                .lib-icon-sprite-position(11, 1);
            }
            .icon-checkmark {
                .lib-icon-sprite-position(0, 2);
            }
            .icon-calendar {
                .lib-icon-sprite-position(1, 2);
            }
            .icon-comment {
                .lib-icon-sprite-position(2, 2);
            }
            .icon-comment-reflected {
                .lib-icon-sprite-position(3, 2);
            }
            .icon-envelope {
                .lib-icon-sprite-position(4, 2);
            }
            .icon-warning {
                .lib-icon-sprite-position(5, 2);
            }
            .icon-trash {
                .lib-icon-sprite-position(6, 2);
            }
            .icon-flag {
                .lib-icon-sprite-position(7, 2);
            }
            .icon-location {
                .lib-icon-sprite-position(8, 2);
            }
            .icon-up {
                .lib-icon-sprite-position(9, 2);
            }
            .icon-down {
                .lib-icon-sprite-position(10, 2);
            }
        }
    }

    @icon-wishlist-full: '\e600';
    @icon-wishlist-empty: '\e601';
    @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-arrow-up-thin: '\e623';
    @icon-arrow-right-thin: '\e624';
    @icon-arrow-left-thin: '\e625';
    @icon-arrow-down-thin: '\e626';

    .icons-font-list {
        list-style: none;
        padding: 0;
        li {
            float: left;
            width: 25%;
            margin-bottom: 35px;
            text-align: center;
            > span {
                .lib-icon-font('', @_icon-font-size: 34px);
                &:before {
                    content: attr(data-icon);
                    margin: 0 auto;
                    display: block;
                }
            }
        }
    }