Skip to Content

Icons

About

Breeze Frontend uses Heroicons v1 icons. Each icon is declared as a LESS variable, so it’s very easy to replace them with any other svg icons.

Source code:

Usage

To use the icon, we provide a breeze-icon mixin. This mixin is coming with built-in critical CSS support, so you don’t have to wrap it into @critical guard:

selector::before { .breeze-icon(@icon-heart, @6); }
selector::before { .breeze-icon(@icon-s-home, @5); }

Icons

Outline .breeze-icon(@icon, @6)
@icon-arrow-up
@icon-arrow-narrow-up
@icon-calendar
@icon-check
@icon-chevron
@icon-eye
@icon-eye-off
@icon-filter
@icon-heart
@icon-home
@icon-information-circle
@icon-mail
@icon-menu
@icon-pencil
@icon-printer
@icon-question-mark-circle
@icon-refresh
@icon-scale
@icon-search
@icon-shopping-bag
@icon-shopping-cart
@icon-star
@icon-trash
@icon-user
@icon-user-circle
@icon-view-grid
@icon-view-list
@icon-x
Solid .breeze-icon(@icon, @5)
@icon-s-check
@icon-s-check-circle
@icon-s-exclamation-circle
@icon-s-filter
@icon-s-home
@icon-s-information-circle
@icon-s-printer
@icon-s-refresh
@icon-s-star