Icons
SVG icons from Figma Design System. All icons are 20x20 by default and support custom colors.
Status Icons
Icons for indicating status and states
loader
tick
check_mark
cross_circle
cross
cancel
warning
checkbox
info
{% import "partials/import-status-icons.twig" as icons %}
{{ icons.loader('var(--xcart-text-primary)') }}
{{ icons.tick('var(--xcart-success)') }}
{{ icons.check_mark('var(--xcart-success)') }}
{{ icons.cross_circle() }} {# red by default #}
{{ icons.cross() }} {# blue by default #}
{{ icons.cancel() }}
{{ icons.warning() }} {# yellow by default #}
{{ icons.checkbox() }}
{{ icons.info() }}Action Icons
Icons for buttons and interactive elements
settings
import_icon
trash
pencil
plus
download
upload
enable
{{ icons.settings() }}
{{ icons.import_icon() }}
{{ icons.trash() }} {# red by default #}
{{ icons.pencil() }} {# blue by default #}
{{ icons.plus() }}
{{ icons.download() }}
{{ icons.upload() }}
{{ icons.enable() }}Navigation Icons
Arrows and navigation elements
arrow_left
arrow_right
{{ icons.arrow_left() }}
{{ icons.arrow_right() }}Rating & Miscellaneous
Stars, calendar, money indicators and other icons
star_full
star_empty
calendar
delivery
card
dollar
percent
{{ icons.star_full() }} {# yellow by default #}
{{ icons.star_empty() }} {# gray border by default #}
{{ icons.calendar() }}
{{ icons.delivery() }}
{{ icons.card() }}
{{ icons.dollar() }}
{{ icons.percent() }}Rating Example
Using star icons to show product ratings
4.0 (128 reviews)
Color Customization
Pass hex color as parameter to customize icon color
var(--xcart-primary)
var(--xcart-success)
var(--xcart-danger)
var(--xcart-warning)
var(--xcart-text-secondary)
{{ icons.plus('#2274A6') }} {# --xcart-primary #}
{{ icons.plus('var(--xcart-success)') }} {# --xcart-success #}
{{ icons.plus('var(--xcart-danger)') }} {# --xcart-danger #}
{{ icons.plus('var(--xcart-warning)') }} {# --xcart-warning #}
{{ icons.plus('var(--xcart-text-secondary)') }} {# --xcart-text-secondary #}Icons in Buttons
Example usage with buttons