Icon¶
Use icon element to style icons anywhere on the page.
Examples¶
Storefront theme provides predefined stylings for various icons according to props of the icon macro. Those stylings are icon_l, icon_xl, icon_xxl, icon_clickable, icon_filled, icon_no-stroke, icon_link, icon_success and icon_error.
<svg class="icon icon_l">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-chevron-down"></use>
</svg>
<svg class="icon icon_xl">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
<svg class="icon icon_xxl">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-basket"></use>
</svg>
<svg class="icon icon_clickable">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-credit-card"></use>
</svg>
<svg class="icon icon_filled">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-heart"></use>
</svg>
<svg class="icon icon_no-stroke">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-check-circle"></use>
</svg>
<svg class="icon icon_link">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-download"></use>
</svg>
<svg class="icon icon_success">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-message-circle"></use>
</svg>
<svg class="icon icon_error">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-send"></use>
</svg>
Icon tags¶
The .icon class was designed to be used with <svg> elements. However, you can use them with any element. Eg. <div> or <span>.
Icon sizes¶
Each icon can have different sizes. We support styles for 3 different size modifiers: l, xl and xxl. To change the icon size, add icon_l, icon_xl or icon_xxl class to your icon.
<svg class="icon icon_l">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-basket"></use>
</svg>
<svg class="icon icon_xl">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-send"></use>
</svg>
<svg class="icon icon_xxl">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-credit-card"></use>
</svg>
Icon variants¶
Each icon can have different color scheme according to the chosen variant. We support styles for 3 variants: link, success and error. You can change the variant by adding one of the following classes: icon_link, icon_success, icon_error.
<svg class="icon icon_link">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-basket"></use>
</svg>
<svg class="icon icon_success">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-send"></use>
</svg>
<svg class="icon icon_error">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-credit-card"></use>
</svg>
Other icon modifiers¶
We provide additional modifiers to make the usage of the icons simpler. You can modify any icon to be clickable with icon_clickable class, to be filled with icon_filled class or to have no stroke with icon_no-stroke class.
<svg class="icon icon_clickable">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-basket"></use>
</svg>
<svg class="icon icon_filled">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-send"></use>
</svg>
<svg class="icon icon_no-stroke">
<use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-credit-card"></use>
</svg>
LESS¶
You can modify any icon less variable in your User Less section to change icon styles.
Icon variables¶
Variables used to style icons.
@iconMSize: 16px;
@iconLSize: 20px;
@iconXlSize: 24px;
@iconXxlSize: 32px;
@iconXxxlSize: 64px;
@iconColor: @globalFontColor;
@iconVariantLinkColor: @linkColorPrimary;
@iconVariantSuccessColor: @primaryColor;
@iconVariantErrorColor: @globalFontColor;
@iconVariantPromoColor: @neutralColors0;
@iconVariantPromoBgColor: @secondaryColor;
@iconVariantPromoPadding: 1;
@iconVariantPromoBorderRadius: 2;
If you want to change icon styles, you can just change the variables. To change default stroke just modify @iconColor variable.
Icon mixins¶
Those mixins are used to create icons.
.icon-m () {
width: @iconMSize;
height: @iconMSize;
}
.icon-l () {
width: @iconLSize;
height: @iconLSize;
}
.icon-xl () {
width: @iconXlSize;
height: @iconXlSize;
}
.icon-xxl () {
width: @iconXxlSize;
height: @iconXxlSize;
}
.icon-xxxl () {
width: @iconXxxlSize;
height: @iconXxxlSize;
}
Icon standard styles¶
Here are standard icon styles.
.icon {
fill: transparent;
stroke: @iconColor;
.icon-m();
&_l {
.icon-l();
}
&_xl {
.icon-xl();
}
&_xxl {
.icon-xxl();
}
&_xxxl {
.icon-xxxl();
}
&_clickable {
cursor: pointer;
}
&_filled {
fill: @iconColor;
}
&_no-stroke {
stroke: transparent;
}
&_secondary-color {
stroke: @globalFontColorSecondary;
}
&_tertiary-color {
stroke: @globalFontColorTertiary;
}
&_link {
fill: transparent;
stroke: @iconVariantLinkColor;
}
&_success {
fill: transparent;
stroke: @iconVariantSuccessColor;
&-filled {
stroke: @neutralColors0;
background-color: @iconVariantSuccessColor;
border-radius: 50%;
vertical-align: middle;
padding: 0.5rem;
box-shadow: 0 0 0px 6px @successColors50;
}
}
&_error {
fill: transparent;
stroke: @iconVariantErrorColor;
&-filled {
stroke: @neutralColors0;
background-color: @iconVariantErrorColor;
border-radius: 50%;
vertical-align: middle;
padding: 0.5rem;
box-shadow: 0 0 0px 6px @errorColors50;
}
}
&_promo {
fill: transparent;
stroke: @iconVariantPromoColor;
background-color: @iconVariantPromoBgColor;
.pixel-to-rem(padding, @iconVariantPromoPadding);
.pixel-to-rem(border-radius, @iconVariantPromoBorderRadius);
vertical-align: middle;
}
}
h-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}