Skip to content
MENU

Soracom

Design System

Icons

Available icons 

SDS uses some standard --modifiers which can be appended to the following SDS components to include icons:

The most basic example is a standalone icon element:

<i class="ds-icon--icon-basic-user"></i>

The following icons are published in the SDS and available for inclusion on html components:

Note: To add a new icon below, add a new variable in the $icons map in ds/src/components/_common/_icons.scss and run gulp build to update this documentation.

Published 

  • --icon-deactivate-sim
  • --icon-sim
  • --icon-calendar-dates
  • --icon-info
  • --icon-notice
  • --icon-warning
  • --icon-signin
  • --icon-signout
  • --icon-password
  • --icon-language
  • --icon-language-solid
  • --icon-copy
  • --icon-coverage
  • --icon-basic-user
  • --icon-email
  • --icon-notification
  • --icon-visible
  • --icon-hidden
  • --icon-light
  • --icon-dark
  • --icon-arrow-top
  • --icon-arrow-right
  • --icon-arrow-bottom
  • --icon-arrow-left
  • --icon-arrow-top-left
  • --icon-arrow-top-right
  • --icon-arrow-bottom-right
  • --icon-arrow-bottom-left
  • --icon-arrows-top-bottom
  • --icon-rotate-cw
  • --icon-rotate-ccw
  • --icon-refresh-cw
  • --icon-refresh-ccw
  • --icon-time
  • --icon-ui-arrow-down
  • --icon-delete
  • --icon-support
  • --icon-download
  • --icon-external-link
  • --icon-qr
  • --icon-settings
  • --icon-menu
  • --icon-edit
  • --icon-s-plus-add
  • --icon-s-plus-minus
  • --icon-s-plus-upload
  • --icon-s-plus-download
  • --icon-cloud-connected
  • --icon-cloud-on-demand
  • --icon-cloud-upload
  • --icon-cloud-download
  • --icon-circle
  • --icon-circle-dashed
  • --icon-offline
  • --icon-inactive
  • --icon-inactive-solid
  • --icon-confirm
  • --icon-online
  • --icon-online-solid
  • --icon-plus
  • --icon-circle-plus
  • --icon-circle-plus-solid
  • --icon-minus
  • --icon-circle-minus
  • --icon-circle-minus-solid
  • --icon-cancel
  • --icon-circle-x
  • --icon-circle-x-solid
  • --icon-circle-question
  • --icon-clipboard
  • --icon-clipboard-copy-to
  • --icon-clipboard-csv
  • --icon-clipboard-text
  • --icon-clipboard-plain-text
  • --icon-clipboard-json
  • --icon-clipboard-plus
  • --icon-clipboard-checked
  • --icon-link
  • --icon-unlink
  • --icon-search
  • --icon-more-horizontal
  • --icon-more-vertical
  • --icon-filter
  • --icon-inspect
  • --icon-log
  • --icon-session
  • --icon-stats
  • --icon-soracom
  • --icon-soracom-animated
  • --icon-soracom-animated-loop
  • --icon-soracom-beam
  • --icon-soracom-canal
  • --icon-soracom-direct
  • --icon-soracom-endorse
  • --icon-soracom-funnel
  • --icon-soracom-door
  • --icon-soracom-gate
  • --icon-soracom-harvest
  • --icon-soracom-inventory
  • --icon-soracom-inventory-client
  • --icon-soracom-junction
  • --icon-soracom-air
  • --icon-soracom-krypton
  • --icon-soracom-krypton-key
  • --icon-soracom-lagoon
  • --icon-soracom-funk
  • --icon-soracom-mosaic
  • --icon-soracom-napter
  • --icon-soracom-orbit
  • --icon-soracom-peek
  • --icon-github
  • --icon-clubhouse
  • --icon-facebook
  • --icon-instagram
  • --icon-linkedin
  • --icon-twitter
  • --icon-youtube

Icons available for development 

The following images are available as scss vars for use in developing SDS components. These icons are not automatically available to use as sds classnames - see above for the list of icons available as sds classnames.

Unpublished 

Soracom 

  • $icon-soracom-s-plus-add
  • $icon-soracom-s-plus-download
  • $icon-soracom-s-plus-minus
  • $icon-soracom-s-plus-upload
  • $icon-soracom-siss005-soracom-beam
  • $icon-soracom-siss006-soracom-canal
  • $icon-soracom-siss007-soracom-direct
  • $icon-soracom-siss008-soracom-endorse
  • $icon-soracom-siss009-soracom-funnel
  • $icon-soracom-siss010-soracom-door
  • $icon-soracom-siss011-soracom-gate
  • $icon-soracom-siss014-soracom-harvest
  • $icon-soracom-siss015-soracom-inventory
  • $icon-soracom-siss016-soracom-inventory-client
  • $icon-soracom-siss017-soracom-junction
  • $icon-soracom-siss018-soracom-air
  • $icon-soracom-siss019-soracom-krypton
  • $icon-soracom-siss020-soracom-krypton-key
  • $icon-soracom-siss021-soracom-lagoon
  • $icon-soracom-siss022-soracom-funk
  • $icon-soracom-siss023-soracom-mosaic
  • $icon-soracom-siss024-soracom-napter
  • $icon-soracom-siss025-soracom-orbit
  • $icon-soracom-siss026-soracom-peek

Arrows 

  • $icon-arrows-arrow-bold-bottom
  • $icon-arrows-arrow-bold-forward-all
  • $icon-arrows-arrow-bold-forward
  • $icon-arrows-arrow-bold-left
  • $icon-arrows-arrow-bold-redo
  • $icon-arrows-arrow-bold-reply-all
  • $icon-arrows-arrow-bold-reply
  • $icon-arrows-arrow-bold-right
  • $icon-arrows-arrow-bold-top
  • $icon-arrows-arrow-bold-undo
  • $icon-arrows-arrow-bottom-left
  • $icon-arrows-arrow-bottom-right
  • $icon-arrows-arrow-bottom
  • $icon-arrows-arrow-forward-all
  • $icon-arrows-arrow-forward
  • $icon-arrows-arrow-left-curved
  • $icon-arrows-arrow-left
  • $icon-arrows-arrow-redo
  • $icon-arrows-arrow-reply-all
  • $icon-arrows-arrow-reply
  • $icon-arrows-arrow-right-curved
  • $icon-arrows-arrow-right
  • $icon-arrows-arrow-top-left
  • $icon-arrows-arrow-top-right
  • $icon-arrows-arrow-top
  • $icon-arrows-arrow-undo
  • $icon-arrows-arrows-diagonals-bltr
  • $icon-arrows-arrows-diagonals-tlbr
  • $icon-arrows-arrows-diagonals
  • $icon-arrows-arrows-hv
  • $icon-arrows-arrows-left-right
  • $icon-arrows-arrows-top-bottom
  • $icon-arrows-chevron-bottom
  • $icon-arrows-chevron-left
  • $icon-arrows-chevron-right
  • $icon-arrows-chevron-top
  • $icon-arrows-chevrons-bottom
  • $icon-arrows-chevrons-left
  • $icon-arrows-chevrons-right
  • $icon-arrows-chevrons-top
  • $icon-arrows-circle-arrow-bottom-left
  • $icon-arrows-circle-arrow-bottom-right
  • $icon-arrows-circle-arrow-bottom
  • $icon-arrows-circle-arrow-left-curved
  • $icon-arrows-circle-arrow-left
  • $icon-arrows-circle-arrow-right-curved
  • $icon-arrows-circle-arrow-right
  • $icon-arrows-circle-arrow-top-left
  • $icon-arrows-circle-arrow-top-right
  • $icon-arrows-circle-arrow-top
  • $icon-arrows-circle-chevron-bottom
  • $icon-arrows-circle-chevron-left
  • $icon-arrows-circle-chevron-right
  • $icon-arrows-circle-chevron-top
  • $icon-arrows-circle-chevrons-bottom
  • $icon-arrows-circle-chevrons-left
  • $icon-arrows-circle-chevrons-right
  • $icon-arrows-circle-chevrons-top
  • $icon-arrows-refresh-ccw-alert
  • $icon-arrows-refresh-ccw
  • $icon-arrows-refresh-cw-alert
  • $icon-arrows-refresh-cw
  • $icon-arrows-rotate-ccw
  • $icon-arrows-rotate-cw

Basic 

  • $icon-basic-bar-chart
  • $icon-basic-book
  • $icon-basic-bookmark-add
  • $icon-basic-bookmark-no
  • $icon-basic-bookmark
  • $icon-basic-bookmarks
  • $icon-basic-box
  • $icon-basic-browser-no
  • $icon-basic-browser
  • $icon-basic-brush
  • $icon-basic-calculator
  • $icon-basic-camera-create
  • $icon-basic-camera-no
  • $icon-basic-camera
  • $icon-basic-case
  • $icon-basic-check-mark-large
  • $icon-basic-check-mark
  • $icon-basic-check-marks
  • $icon-basic-circle-bar
  • $icon-basic-circle-block
  • $icon-basic-circle-checked-solid
  • $icon-basic-circle-checked
  • $icon-basic-circle-dashed
  • $icon-basic-circle-menu
  • $icon-basic-circle-minus-solid
  • $icon-basic-circle-minus
  • $icon-basic-circle-more-horizontal
  • $icon-basic-circle-more-vertical
  • $icon-basic-circle-pause-solid
  • $icon-basic-circle-pause
  • $icon-basic-circle-plus-solid
  • $icon-basic-circle-plus
  • $icon-basic-circle-star
  • $icon-basic-circle-x-solid
  • $icon-basic-circle-x
  • $icon-basic-circle
  • $icon-basic-clear-style
  • $icon-basic-copy
  • $icon-basic-cut
  • $icon-basic-dashboard
  • $icon-basic-delete
  • $icon-basic-download-bold
  • $icon-basic-download
  • $icon-basic-drop
  • $icon-basic-exit
  • $icon-basic-external-link
  • $icon-basic-eye-no
  • $icon-basic-eye
  • $icon-basic-flag
  • $icon-basic-flame
  • $icon-basic-glasses
  • $icon-basic-globe-no
  • $icon-basic-globe
  • $icon-basic-heart-no
  • $icon-basic-heart
  • $icon-basic-home
  • $icon-basic-image
  • $icon-basic-inbox
  • $icon-basic-language-solid
  • $icon-basic-language
  • $icon-basic-layers
  • $icon-basic-lightning-no
  • $icon-basic-lightning
  • $icon-basic-link-no
  • $icon-basic-link
  • $icon-basic-list
  • $icon-basic-log
  • $icon-basic-mail
  • $icon-basic-maximize
  • $icon-basic-menu-dots
  • $icon-basic-menu
  • $icon-basic-mic-no
  • $icon-basic-mic
  • $icon-basic-minimize
  • $icon-basic-minus-large
  • $icon-basic-minus-small
  • $icon-basic-minus
  • $icon-basic-more-horizontal
  • $icon-basic-more-vertical
  • $icon-basic-newspaper
  • $icon-basic-options
  • $icon-basic-paperclip-no
  • $icon-basic-paperclip
  • $icon-basic-pause-large
  • $icon-basic-pause
  • $icon-basic-pencil-create
  • $icon-basic-pencil-edit
  • $icon-basic-plus-large
  • $icon-basic-plus
  • $icon-basic-presentation
  • $icon-basic-printer
  • $icon-basic-pulse
  • $icon-basic-qr-scan
  • $icon-basic-qr
  • $icon-basic-scan
  • $icon-basic-screenshot
  • $icon-basic-search
  • $icon-basic-send
  • $icon-basic-settings
  • $icon-basic-share-arrow
  • $icon-basic-share
  • $icon-basic-star-no
  • $icon-basic-star
  • $icon-basic-sticker
  • $icon-basic-support
  • $icon-basic-table
  • $icon-basic-text-align-center
  • $icon-basic-text-align-justify
  • $icon-basic-text-align-left
  • $icon-basic-text-align-right
  • $icon-basic-text-bgcolor
  • $icon-basic-text-bold
  • $icon-basic-text-color
  • $icon-basic-text-italic
  • $icon-basic-text-underline
  • $icon-basic-thumbs-down
  • $icon-basic-thumbs-up
  • $icon-basic-toggle-left
  • $icon-basic-toggle-right
  • $icon-basic-trash-empty
  • $icon-basic-trash
  • $icon-basic-user
  • $icon-basic-video-no
  • $icon-basic-video
  • $icon-basic-x-large
  • $icon-basic-x
  • $icon-basic-zoom-in
  • $icon-basic-zoom-out

Call 

  • $icon-call-call-add
  • $icon-call-call-calling
  • $icon-call-call-decline
  • $icon-call-call-end
  • $icon-call-call-forwarded
  • $icon-call-call-hash
  • $icon-call-call-hold
  • $icon-call-call-incoming
  • $icon-call-call-missed
  • $icon-call-call-muted
  • $icon-call-call-no
  • $icon-call-call-numbers
  • $icon-call-call-outcoming
  • $icon-call-call-phone
  • $icon-call-call-recieved
  • $icon-call-call-voicemail

Chatting 

  • $icon-chatting-comment-checked
  • $icon-chatting-comment-delete
  • $icon-chatting-comment-minus
  • $icon-chatting-comment-plus
  • $icon-chatting-comment-text
  • $icon-chatting-comment
  • $icon-chatting-question

Connection 

  • $icon-connection-airplay
  • $icon-connection-bluetooth-no
  • $icon-connection-bluetooth
  • $icon-connection-broadcast
  • $icon-connection-broadcasting
  • $icon-connection-cast
  • $icon-connection-plug-closed
  • $icon-connection-plug-open
  • $icon-connection-session-arrows
  • $icon-connection-session-error
  • $icon-connection-session-flash
  • $icon-connection-session-plug
  • $icon-connection-wi-fi-no
  • $icon-connection-wi-fi

File 

  • $icon-file-clipboard-checked
  • $icon-file-clipboard-copy-to
  • $icon-file-clipboard-csv
  • $icon-file-clipboard-delete
  • $icon-file-clipboard-json
  • $icon-file-clipboard-minus
  • $icon-file-clipboard-plain-text
  • $icon-file-clipboard-plus
  • $icon-file-clipboard-text
  • $icon-file-clipboard
  • $icon-file-file-checked
  • $icon-file-file-code
  • $icon-file-file-create
  • $icon-file-file-delete
  • $icon-file-file-download
  • $icon-file-file-draft
  • $icon-file-file-minus
  • $icon-file-file-plus
  • $icon-file-file-scan
  • $icon-file-file-shredder
  • $icon-file-file-text
  • $icon-file-file-upload
  • $icon-file-file
  • $icon-file-folder-arrow
  • $icon-file-folder-checked
  • $icon-file-folder-cloud
  • $icon-file-folder-create
  • $icon-file-folder-delete
  • $icon-file-folder-minus
  • $icon-file-folder-music
  • $icon-file-folder-opened
  • $icon-file-folder-photo
  • $icon-file-folder-plus
  • $icon-file-folder-zip
  • $icon-file-folder
  • $icon-file-inspect
  • $icon-file-note-text
  • $icon-file-note

Finance 

  • $icon-finance-bitcoin
  • $icon-finance-creditcard-add
  • $icon-finance-creditcard-face
  • $icon-finance-creditcard-income
  • $icon-finance-creditcard-no
  • $icon-finance-creditcard-outcome
  • $icon-finance-creditcard-scan
  • $icon-finance-creditcard
  • $icon-finance-ethereum
  • $icon-finance-paypass
  • $icon-finance-strongbox
  • $icon-finance-wallet

Food 

  • $icon-food-avocado
  • $icon-food-bread
  • $icon-food-chicken
  • $icon-food-coffee
  • $icon-food-egg
  • $icon-food-icecream

Gadgets 

  • $icon-gadgets-battery-100
  • $icon-gadgets-battery-20
  • $icon-gadgets-battery-40
  • $icon-gadgets-battery-60
  • $icon-gadgets-battery-80
  • $icon-gadgets-battery-charging
  • $icon-gadgets-battery-no
  • $icon-gadgets-battery
  • $icon-gadgets-devices
  • $icon-gadgets-flash-card
  • $icon-gadgets-floppy
  • $icon-gadgets-iPad
  • $icon-gadgets-iPhone
  • $icon-gadgets-laptop
  • $icon-gadgets-memory-card
  • $icon-gadgets-mobile
  • $icon-gadgets-monitor
  • $icon-gadgets-server
  • $icon-gadgets-sim-card

Grid 

  • $icon-grid-apps
  • $icon-grid-block-align-bottom
  • $icon-grid-block-align-horizontally
  • $icon-grid-block-align-left
  • $icon-grid-block-align-right
  • $icon-grid-block-align-top
  • $icon-grid-block-align-vertically
  • $icon-grid-block-distribute-horizontally
  • $icon-grid-block-distribute-vertically
  • $icon-grid-brake-page
  • $icon-grid-edit-shape
  • $icon-grid-elements
  • $icon-grid-frame
  • $icon-grid-grid-6
  • $icon-grid-grid-col-2
  • $icon-grid-grid-col-3
  • $icon-grid-grid-dynamic
  • $icon-grid-grid-frame
  • $icon-grid-grid-row-2
  • $icon-grid-grid-row-3
  • $icon-grid-grid-row
  • $icon-grid-grid-slides
  • $icon-grid-grid-small
  • $icon-grid-grid
  • $icon-grid-iframe
  • $icon-grid-kanban
  • $icon-grid-layout
  • $icon-grid-padding
  • $icon-grid-rotate-left
  • $icon-grid-rotate-right
  • $icon-grid-ruler
  • $icon-grid-segment
  • $icon-grid-select-area
  • $icon-grid-select
  • $icon-grid-sidebar-left
  • $icon-grid-sidebar-right
  • $icon-grid-stack-1
  • $icon-grid-stack
  • $icon-grid-text

Maps 

  • $icon-maps-360
  • $icon-maps-compass
  • $icon-maps-direction-45
  • $icon-maps-direction
  • $icon-maps-globe
  • $icon-maps-location-no
  • $icon-maps-location
  • $icon-maps-map-pin-location
  • $icon-maps-map
  • $icon-maps-panorama
  • $icon-maps-pin-add
  • $icon-maps-pin-no
  • $icon-maps-pin-question
  • $icon-maps-pin-round
  • $icon-maps-pin-start
  • $icon-maps-pin
  • $icon-maps-radar
  • $icon-maps-route

Notifications 

  • $icon-notifications-alert-circle
  • $icon-notifications-alert-octagon
  • $icon-notifications-alert-triangle
  • $icon-notifications-app-notification
  • $icon-notifications-bell-add
  • $icon-notifications-bell-alert
  • $icon-notifications-bell-checked
  • $icon-notifications-bell-minus
  • $icon-notifications-bell-no
  • $icon-notifications-bell
  • $icon-notifications-info
  • $icon-notifications-minus-octagon
  • $icon-notifications-question-circle
  • $icon-notifications-x-octagon

Reactions 

  • $icon-reactions-laughing
  • $icon-reactions-neutral
  • $icon-reactions-sad
  • $icon-reactions-shocked
  • $icon-reactions-smiled

Security 

  • $icon-security-facetime
  • $icon-security-key-no
  • $icon-security-key
  • $icon-security-lock-circle
  • $icon-security-lock-no
  • $icon-security-lock
  • $icon-security-shield-lock
  • $icon-security-shield-no
  • $icon-security-shield-ok
  • $icon-security-shield
  • $icon-security-unlock
  • $icon-security-verified

Shopping 

  • $icon-shopping-bag
  • $icon-shopping-bascket
  • $icon-shopping-cart
  • $icon-shopping-coupon
  • $icon-shopping-cut-coupon
  • $icon-shopping-delivery
  • $icon-shopping-discount
  • $icon-shopping-filter
  • $icon-shopping-gift
  • $icon-shopping-pos
  • $icon-shopping-tag
  • $icon-shopping-tote

Software 

  • $icon-software-cloud-checked
  • $icon-software-cloud-connect
  • $icon-software-cloud-download
  • $icon-software-cloud-no
  • $icon-software-cloud-on-demand
  • $icon-software-cloud-upload
  • $icon-software-cloud
  • $icon-software-code
  • $icon-software-database
  • $icon-software-terminal

Symbols 

  • $icon-symbols-at-sign
  • $icon-symbols-behance
  • $icon-symbols-clubhouse
  • $icon-symbols-command
  • $icon-symbols-dribbble
  • $icon-symbols-facebook
  • $icon-symbols-github
  • $icon-symbols-gitlab
  • $icon-symbols-google
  • $icon-symbols-hash
  • $icon-symbols-instagram
  • $icon-symbols-linkedin
  • $icon-symbols-peace
  • $icon-symbols-twitter
  • $icon-symbols-youtube
  • $icon-symbols-сс
  • $icon-symbols-сс0

Time 

  • $icon-time-alarm-checked
  • $icon-time-alarm-minus
  • $icon-time-alarm-no
  • $icon-time-alarm-plus
  • $icon-time-alarm-snooze
  • $icon-time-alarm
  • $icon-time-calendar-checked
  • $icon-time-calendar-create
  • $icon-time-calendar-dates
  • $icon-time-calendar-delete
  • $icon-time-calendar-minus
  • $icon-time-calendar-plus
  • $icon-time-calendar
  • $icon-time-stopwatch
  • $icon-time-time-history
  • $icon-time-time
  • $icon-time-timer
  • $icon-time-watch

UI 

  • $icon-ui-arrow-down-large
  • $icon-ui-arrow-down
  • $icon-ui-arrow-up-down
  • $icon-ui-checkbox-checked
  • $icon-ui-checkbox-indeterminate
  • $icon-ui-checkbox-unchecked

Various 

  • $icon-various-advertisement
  • $icon-various-atom
  • $icon-various-bone
  • $icon-various-brightness-high
  • $icon-various-brightness-low
  • $icon-various-contrast
  • $icon-various-cross
  • $icon-various-crosshairs
  • $icon-various-cup
  • $icon-various-form
  • $icon-various-infinity
  • $icon-various-items
  • $icon-various-lightbulb
  • $icon-various-moon
  • $icon-various-nut
  • $icon-various-planet
  • $icon-various-pocket
  • $icon-various-rocket
  • $icon-various-sun
  • $icon-various-toy-horse