Skip to content

Icon

The h-icon webcomponent is used to render icons on a page. In order to use the h-icon you must declare the source of the icon set of your choice in the script tag:

HIcon src attribute declaration
    HIcon.src = 'my-source/of/icons';

Note: h- stands for headless. This is naming convention used for every webcomponent as they must have a two-part name.

Attributes

Attribute name Type Default Description
icon-name string A name of the icon to render
size TIconSize An icon size modifier
filled boolean false decides whether a rendered icon should filled
clickable boolean false decides whether a rendered icon should be clickable
noStroke boolean false decides whether a rendered icon should have stroke property

Basic Icon

HTML
    <h-icon icon-name="icon-heart"></h-icon>
HTML
    <h-icon icon-name="icon-heart">
        <svg class="icon">
            <use xlink:href="http://example.com/xlink#icon-heart"></use>
        </svg>
    </h-icon>

Examples

Filled heart icon with the xl size:

HTML
    <h-icon icon-name="icon-heart" size="xl" filled></h-icon>
HTML
    <h-icon icon-name="icon-heart">
        <svg class="icon icon_xl icon_filled">
            <use xlink:href="http://example.com/xlink#icon-heart"></use>
        </svg>
    </h-icon>

Clickable search icon without stroke:

HTML
    <h-icon icon-name="icon-search" clickable noStroke></h-icon>
HTML
    <h-icon icon-name="icon-search">
        <svg class="icon icon_clickable icon_no-stroke">
            <use xlink:href="http://example.com/xlink#icon-search"></use>
        </svg>
    </h-icon>

Filled clickable check icon without stroke and xxl size:

HTML
    <h-icon icon-name="icon-check" size="xxl" filled clickable noStroke></h-icon>
HTML
    <h-icon icon-name="icon-check">
        <svg class="icon icon_xxl icon_filled icon_clickable icon_no-stroke">
            <use xlink:href="http://example.com/xlink#icon-check"></use>
        </svg>
    </h-icon>

If you have read the icon styles documentation you probably noticed that those are the same classes that are used to style the icon components.

Objects reference

Components reference