Icons
Icons are graphical representations to draw attention to specific actions and features.
Icons should be used intentionally and be paired with text, when possible, for accessibility. Icons can function as both interactive and static elements. Fizz icons are based on Material Design’s filled icon styles.
Usage
HTML
<svg class="fizz-icon-24">
<use href="#can"></use>
</svg>Icon List
- access-time
- add-stroke
- add
- arrow-down
- arrow-left
- arrow-right
- arrow-up
- arrow
- award
- bank
- bar
- bottle
- box
- bullet
- campaign
- can
- check-filled
- check
- chevron-down
- chevron-left
- chevron-right
- chevron-up
- chevron
- close
- connection
- content-copy
- create
- credits
- currency
- dashboard
- date
- deal
- delete
- desktop
- direction-down
- direction-up
- document
- drag
- error
- external-link
- file-upload
- filter-list
- gift-card
- grid-view
- headset-mic
- help
- home
- image
- info
- integrated
- inventory
- invoice
- keg
- lightbulb
- list
- location-pin
- logout
- marketing-site
- menu
- more-horiz
- more-vert
- my-distributors
- near-me
- new-releases
- notification
- order-again
- order-guide
- order-history
- payment-method
- payments
- people
- person
- product-requests
- provi-chat
- question-filled
- question-outline
- remove
- rep-recommendations
- reports
- save
- search
- send
- settings
- shopping-bag
- shopping-cart
- show
- smart-phone
- sparkle
- store-front
- swap
- vacation
- visibility-off
- visibility-on
- warning
- web-asset
Payment Type Icons
Spinner
Add an empty <div> with the class .fizz-icon-spinner. or
.fizz-icon-spinner-small.
HTML
<div class="fizz-icon-spinner"></div>
<div class="fizz-icon-spinner-small"></div>Guidelines
Icon Sizes
The Medium icon is the most used and ideal for mobile considering the tap requirements for accessibility.
-
XLarge / fizz-icon-48
Use only when larger icons are needed
-
Large / fizz-icon-32
Use only when larger icons are needed
-
Medium / fizz-icon-24
Use often anytime an icon is needed.
-
Small / fizz-icon-16
Use with an accompanying text size
-
X-Small / fizz-icon-12
Use sparingly in tight spaces
Icon Colors
Icons can be colored using these utility classes.
-
.fizz-icon-color-body -
.fizz-icon-color-subdued -
.fizz-icon-color-link -
.fizz-icon-color-brand -
.fizz-icon-color-brand-hover -
.fizz-icon-color-brand-secondary -
.fizz-icon-color-inverted -
.fizz-icon-color-warning -
.fizz-icon-color-integrated -
.fizz-icon-color-deal -
.fizz-icon-color-success -
.fizz-icon-color-error
You can have icons inherit their color from the surrounding text
For standalone icon(s), icon-body is the color that will be pulled in by default
Use a distinct icon color to have icons standout when being used to highlight features of a product
Interactive Icons
Keep icon size relative to the text size when using together for an action. For example, if the text is
16px, the
icon should be 16px as well.
Icon Only Button
Use icon-only button when using for an action without the text. Interactive icons can have 5 possible interaction states - enabled, hover, focused, active and disabled.
Ensure that actionable icons aren’t too close together on all devices (especially mobile). Besides sitting in a wrapper, there should be a multiple of 4/8px spacing between them with 8 being minimum. See Buttons for more information.
HTML
<button class="fizz-icon-button-small">
<svg class="fizz-icon-16"
role="img"
aria-hidden="true"
width="24"
height="24">
<use href="#create"></use>
</svg>
</button>Inverted Icon Only Button
HTML
<div class="fizz-surface-brand fizz-inset-square-16">
<button class="fizz-icon-button-small fizz-icon-button-inverted">
<svg class="fizz-icon-16"
role="img"
aria-hidden="true"
width="24"
height="24">
<use href="#create"></use>
</svg>
</button>
</div>Tooltip
Tooltips provide users with legible text that makes the meaning of an icon immediately clear. See Tooltips for more information.