Icons

Unless circumstances demand otherwise, Tickster uses color icons from Nucleo in all its applications.

For web use, here are the icons currently represented in the UI Framework:

Important

Some of these icons use custom variables that won't make the usable in <img> elements. These variables (e.g. --positive) will only make sense in a <svg> context.

• app
• arrow-up-right
• arrow-up
• automation
• back-arrow
• bin
• blink
• calendar-dates
• calendar-event
• cards
• cart
• chart
• check
• chat
• clock
• collections
• connect
• contacts
• copy
• customize
• dashboard
• database
• default
• design
• dots-vertical
• desktop
• edit
• email
• email-forward
• emoji-sad
• error
• event-done
• event-upcoming
• express-order
• eye
• file-chart
• file-money
• filter
• forward-arrow
• full-screen
• funnel
• giftcard
• help
• home
• info
• letter
• link
• list
• lock
• logo
• logo-circle
• mailbox
• menu
• mobile
• money
• package
• paperplane
• papers
• payment-terminal
• pencil
• person-heart
• pin
• pins
• play
• plus
• pointer-click
• power
• preview
• profilecard
• question
• recipients
• recipients-exclude
• recipients-include
• restore
• robot
• search
• seat
• seasoncard
• security
• server
• services
• settings
• sms
• table
• tablet
• ticket
• ticket-outline
• tickets_goods
• trash
• tray-arrow-down
• tray-arrow-up
• trigger
• user
• warning
• webhook

Example usage:

<svg class="c-icon" aria-hidden="true" focusable="false" fill="currentColor">
    <use
        href="/path/to/ui-framework/symbol/svg/sprite.symbol.svg#icon-name"
        xlink:href="/path/to/ui-framework/symbol/svg/sprite.symbol.svg#icon-name"
    ></use>
</svg>

…or:

<img src="/path/to/ui-framework/svg/icon-name.svg" alt=""/>