Icons

The default set of icons use Ionicons.

Variables

var(--color-icons): #333 - the default color for all icons if nothing is passed to the mixin

Mixins

icon $icon, $size, $fill

Parameters

$icon (required) - String; the name of the icon as taken from the list below
$size (optional) - CSS Unit; if you want to declare a size, it will be forced to a square
$fill (optional) - CSS variable; if you want to color the icon other than the default; it must be a variable from the stylesheets.color configuration object

Usage

.icon-alert {
  @mixin icon alert, 16px, red;
}

Output

.icon-alert {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: svg-load('../../icons/ionicons/alert.svg', fill=red);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
  vertical-align: middle;
}

Helpers

None

Example

Assuming you've called the mixin as follows:

.icon-alert {
  @mixin icon alert, 10px, red;
}

<div class="icon-alert"></div>

List of Icon Names

alert-circled
alert
android-add-circle
android-add
android-alarm-clock
android-alert
android-apps
android-archive
android-arrow-back
android-arrow-down
android-arrow-dropdown-circle
android-arrow-dropdown
android-arrow-dropleft-circle
android-arrow-dropleft
android-arrow-dropright-circle
android-arrow-dropright
android-arrow-dropup-circle
android-arrow-dropup
android-arrow-forward
android-arrow-up
android-attach
android-bar
android-bicycle
android-boat
android-bookmark
android-bulb
android-bus
android-calendar
android-call
android-camera
android-cancel
android-car
android-cart
android-chat
android-checkbox-blank
android-checkbox-outline-blank
android-checkbox-outline
android-checkbox
android-checkmark-circle
android-clipboard
android-close
android-cloud-circle
android-cloud-done
android-cloud-outline
android-cloud
android-color-palette
android-compass
android-contact
android-contacts
android-contract
android-create
android-delete
android-desktop
android-document
android-done-all
android-done
android-download
android-drafts
android-exit
android-expand
android-favorite-outline
android-favorite
android-film
android-folder-open
android-folder
android-funnel
android-globe
android-hand
android-hangout
android-happy
android-home
android-image
android-laptop
android-list
android-locate
android-lock
android-mail
android-map
android-menu
android-microphone-off
android-microphone
android-more-horizontal
android-more-vertical
android-navigate
android-notifications-none
android-notifications-off
android-notifications
android-open
android-options
android-people
android-person-add
android-person
android-phone-landscape
android-phone-portrait
android-pin
android-plane
android-playstore
android-print
android-radio-button-off
android-radio-button-on
android-refresh
android-remove-circle
android-remove
android-restaurant
android-sad
android-search
android-send
android-settings
android-share-alt
android-share
android-star-half
android-star-outline
android-star
android-stopwatch
android-subway
android-sunny
android-sync
android-textsms
android-time
android-train
android-unlock
android-upload
android-volume-down
android-volume-mute
android-volume-off
android-volume-up
android-walk
android-warning
android-watch
android-wifi
aperture
archive
arrow-down-a
arrow-down-b
arrow-down-c
arrow-expand
arrow-graph-down-left
arrow-graph-down-right
arrow-graph-up-left
arrow-graph-up-right
arrow-left-a
arrow-left-b
arrow-left-c
arrow-move
arrow-resize
arrow-return-left
arrow-return-right
arrow-right-a
arrow-right-b
arrow-right-c
arrow-shrink
arrow-swap
arrow-up-a
arrow-up-b
arrow-up-c
asterisk
at
backspace-outline
backspace
bag
battery-charging
battery-empty
battery-full
battery-half
battery-low
beaker
beer
bluetooth
bonfire
bookmark
bowtie
briefcase
bug
calculator
calendar
camera
card
cash
chatbox-working
chatbox
chatboxes
chatbubble-working
chatbubble
chatbubbles
checkmark-circled
checkmark-round
checkmark
chevron-down
chevron-left
chevron-right
chevron-up
clipboard
clock
close-circled
close-round
close
closed-captioning
cloud
code-download
code-working
code
coffee
compass
compose
connection-bars
contrast
crop
cube
disc
document-text
document
drag
earth
easel
edit
egg
eject
email-unread
email
erlenmeyer-flask-bubbles
erlenmeyer-flask
eye-disabled
eye
female
filing
film-marker
fireball
flag
flame
flash-off
flash
folder
fork-repo
fork
forward
funnel
gear-a
gear-b
grid
hammer
happy-outline
happy
headphone
heart-broken
heart
help-buoy
help-circled
help
home
icecream
image
images
information-circled
information
ionic
ios-alarm-outline
ios-alarm
ios-albums-outline
ios-albums
ios-americanfootball-outline
ios-americanfootball
ios-analytics-outline
ios-analytics
ios-arrow-back
ios-arrow-down
ios-arrow-forward
ios-arrow-left
ios-arrow-right
ios-arrow-thin-down
ios-arrow-thin-left
ios-arrow-thin-right
ios-arrow-thin-up
ios-arrow-up
ios-at-outline
ios-at
ios-barcode-outline
ios-barcode
ios-baseball-outline
ios-baseball
ios-basketball-outline
ios-basketball
ios-bell-outline
ios-bell
ios-body-outline
ios-body
ios-bolt-outline
ios-bolt
ios-book-outline
ios-book
ios-bookmarks-outline
ios-bookmarks
ios-box-outline
ios-box
ios-briefcase-outline
ios-briefcase
ios-browsers-outline
ios-browsers
ios-calculator-outline
ios-calculator
ios-calendar-outline
ios-calendar
ios-camera-outline
ios-camera
ios-cart-outline
ios-cart
ios-chatboxes-outline
ios-chatboxes
ios-chatbubble-outline
ios-chatbubble
ios-checkmark-empty
ios-checkmark-outline
ios-checkmark
ios-circle-filled
ios-circle-outline
ios-clock-outline
ios-clock
ios-close-empty
ios-close-outline
ios-close
ios-cloud-download-outline
ios-cloud-download
ios-cloud-outline
ios-cloud-upload-outline
ios-cloud-upload
ios-cloud
ios-cloudy-night-outline
ios-cloudy-night
ios-cloudy-outline
ios-cloudy
ios-cog-outline
ios-cog
ios-color-filter-outline
ios-color-filter
ios-color-wand-outline
ios-color-wand
ios-compose-outline
ios-compose
ios-contact-outline
ios-contact
ios-copy-outline
ios-copy
ios-crop-strong
ios-crop
ios-download-outline
ios-download
ios-drag
ios-email-outline
ios-email
ios-eye-outline
ios-eye
ios-fastforward-outline
ios-fastforward
ios-filing-outline
ios-filing
ios-film-outline
ios-film
ios-flag-outline
ios-flag
ios-flame-outline
ios-flame
ios-flask-outline
ios-flask
ios-flower-outline
ios-flower
ios-folder-outline
ios-folder
ios-football-outline
ios-football
ios-game-controller-a-outline
ios-game-controller-a
ios-game-controller-b-outline
ios-game-controller-b
ios-gear-outline
ios-gear
ios-glasses-outline
ios-glasses
ios-grid-view-outline
ios-grid-view
ios-heart-outline
ios-heart
ios-help-empty
ios-help-outline
ios-help
ios-home-outline
ios-home
ios-infinite-outline
ios-infinite
ios-information-empty
ios-information-outline
ios-information
ios-ionic-outline
ios-keypad-outline
ios-keypad
ios-lightbulb-outline
ios-lightbulb
ios-list-outline
ios-list
ios-location-outline
ios-location
ios-locked-outline
ios-locked
ios-loop-strong
ios-loop
ios-medical-outline
ios-medical
ios-medkit-outline
ios-medkit
ios-mic-off
ios-mic-outline
ios-mic
ios-minus-empty
ios-minus-outline
ios-minus
ios-monitor-outline
ios-monitor
ios-moon-outline
ios-moon
ios-more-outline
ios-more
ios-musical-note
ios-musical-notes
ios-navigate-outline
ios-navigate
ios-nutrition-outline
ios-nutrition
ios-paper-outline
ios-paper
ios-paperplane-outline
ios-paperplane
ios-partlysunny-outline
ios-partlysunny
ios-pause-outline
ios-pause
ios-paw-outline
ios-paw
ios-people-outline
ios-people
ios-person-outline
ios-person
ios-personadd-outline
ios-personadd
ios-photos-outline
ios-photos
ios-pie-outline
ios-pie
ios-pint-outline
ios-pint
ios-play-outline
ios-play
ios-plus-empty
ios-plus-outline
ios-plus
ios-pricetag-outline
ios-pricetag
ios-pricetags-outline
ios-pricetags
ios-printer-outline
ios-printer
ios-pulse-strong
ios-pulse
ios-rainy-outline
ios-rainy
ios-recording-outline
ios-recording
ios-redo-outline
ios-redo
ios-refresh-empty
ios-refresh-outline
ios-refresh
ios-reload
ios-reverse-camera-outline
ios-reverse-camera
ios-rewind-outline
ios-rewind
ios-rose-outline
ios-rose
ios-search-strong
ios-search
ios-settings-strong
ios-settings
ios-shuffle-strong
ios-shuffle
ios-skipbackward-outline
ios-skipbackward
ios-skipforward-outline
ios-skipforward
ios-snowy
ios-speedometer-outline
ios-speedometer
ios-star-half
ios-star-outline
ios-star
ios-stopwatch-outline
ios-stopwatch
ios-sunny-outline
ios-sunny
ios-telephone-outline
ios-telephone
ios-tennisball-outline
ios-tennisball
ios-thunderstorm-outline
ios-thunderstorm
ios-time-outline
ios-time
ios-timer-outline
ios-timer
ios-toggle-outline
ios-toggle
ios-trash-outline
ios-trash
ios-undo-outline
ios-undo
ios-unlocked-outline
ios-unlocked
ios-upload-outline
ios-upload
ios-videocam-outline
ios-videocam
ios-volume-high
ios-volume-low
ios-wineglass-outline
ios-wineglass
ios-world-outline
ios-world
ipad
iphone
ipod
jet
key
knife
laptop
leaf
levels
lightbulb
link
load-a
load-b
load-c
load-d
location
lock-combination
locked
log-in
log-out
loop
magnet
male
man
map
medkit
merge
mic-a
mic-b
mic-c
minus-circled
minus-round
minus
model-s
monitor
more
mouse
music-note
navicon-round
navicon
navigate
network
no-smoking
nuclear
outlet
paintbrush
paintbucket
paper-airplane
paperclip
pause
person-add
person-stalker
person
pie-graph
pin
pinpoint
pizza
plane
planet
play
playstation
plus-circled
plus-round
plus
podium
pound
power
pricetag
pricetags
printer
pull-request
qr-scanner
quote
radio-waves
record
refresh
reply-all
reply
ribbon-a
ribbon-b
sad-outline
sad
scissors
search
settings
share
shuffle
skip-backward
skip-forward
social-android-outline
social-android
social-angular-outline
social-angular
social-apple-outline
social-apple
social-bitcoin-outline
social-bitcoin
social-buffer-outline
social-buffer
social-chrome-outline
social-chrome
social-codepen-outline
social-codepen
social-css3-outline
social-css3
social-designernews-outline
social-designernews
social-dribbble-outline
social-dribbble
social-dropbox-outline
social-dropbox
social-euro-outline
social-euro
social-facebook-outline
social-facebook
social-foursquare-outline
social-foursquare
social-freebsd-devil
social-github-outline
social-github
social-google-outline
social-google
social-googleplus-outline
social-googleplus
social-hackernews-outline
social-hackernews
social-html5-outline
social-html5
social-instagram-outline
social-instagram
social-javascript-outline
social-javascript
social-linkedin-outline
social-linkedin
social-markdown
social-nodejs
social-octocat
social-pinterest-outline
social-pinterest
social-python
social-reddit-outline
social-reddit
social-rss-outline
social-rss
social-sass
social-skype-outline
social-skype
social-snapchat-outline
social-snapchat
social-tumblr-outline
social-tumblr
social-tux
social-twitch-outline
social-twitch
social-twitter-outline
social-twitter
social-usd-outline
social-usd
social-vimeo-outline
social-vimeo
social-whatsapp-outline
social-whatsapp
social-windows-outline
social-windows
social-wordpress-outline
social-wordpress
social-yahoo-outline
social-yahoo
social-yen-outline
social-yen
social-youtube-outline
social-youtube
soup-can-outline
soup-can
speakerphone
speedometer
spoon
star
stats-bars
steam
stop
thermometer
thumbsdown
thumbsup
toggle-filled
toggle
transgender
trash-a
trash-b
trophy
tshirt-outline
tshirt
umbrella
university
unlocked
upload
usb
videocamera
volume-high
volume-low
volume-medium
volume-mute
wand
waterdrop
wifi
wineglass
woman
wrench
xbox