Skip to main content

Introduction

The SFDC Salesforce1 styleguide provides a number of new icons both for setting context and also for UI elements. As part of this project we are providing icon classes and styles more in the style of Bootstrap or Font Awesome to make inserting icons easier. As many of these icons are image based, you will not have the same level of customization in terms of sizing or coloring as you do with the font-based icons.

Sizes

.s1icon-xs

.s1icon-sm (default)

.s1icon-m

.s1icon-lg

.s1icon-xl

.s1icon-xxl

Standard Icons

Mouse over to view CSS classes.

  • s1icon s1icon-s-account
  • s1icon s1icon-s-campaign
  • s1icon s1icon-s-campaign-members
  • s1icon s1icon-s-case
  • s1icon s1icon-s-contact
  • s1icon s1icon-s-contract
  • s1icon s1icon-s-dashboard
  • s1icon s1icon-s-lead
  • s1icon s1icon-s-opportunity
  • s1icon s1icon-s-portal
  • s1icon s1icon-s-product
  • s1icon s1icon-s-record
  • s1icon s1icon-s-solution
  • s1icon s1icon-s-transcript
  • s1icon s1icon-s-avatar
  • s1icon s1icon-s-approval
  • s1icon s1icon-s-apps
  • s1icon s1icon-s-connected-apps-admins
  • s1icon s1icon-s-calibration
  • s1icon s1icon-s-coaching
  • s1icon s1icon-s-drafts
  • s1icon s1icon-s-email
  • s1icon s1icon-s-event
  • s1icon s1icon-s-endorsement
  • s1icon s1icon-s-feed
  • s1icon s1icon-s-feedback
  • s1icon s1icon-s-file
  • s1icon s1icon-s-goals
  • s1icon s1icon-s-groups
  • s1icon s1icon-s-insights
  • s1icon s1icon-s-link
  • s1icon s1icon-s-note
  • s1icon s1icon-s-people
  • s1icon s1icon-s-performance
  • s1icon s1icon-s-photo
  • s1icon s1icon-s-poll
  • s1icon s1icon-s-post
  • s1icon s1icon-s-question-best
  • s1icon s1icon-s-question-feed
  • s1icon s1icon-s-quotes
  • s1icon s1icon-s-record
  • s1icon s1icon-s-report
  • s1icon s1icon-s-recent
  • s1icon s1icon-s-related-list
  • s1icon s1icon-s-scan-card
  • s1icon s1icon-s-skill-entity
  • s1icon s1icon-s-social
  • s1icon s1icon-s-task
  • s1icon s1icon-s-thanks
  • s1icon s1icon-s-today
  • s1icon s1icon-s-canvas
  • s1icon s1icon-s-custom
  • s1icon s1icon-s-default
  • s1icon s1icon-s-avatar-loading
  • s1icon s1icon-s-groups-loading
  • s1icon s1icon-s-thanks-loading
  • s1icon s1icon-s-files
  • s1icon s1icon-s-concur
  • s1icon s1icon-s-dropbox
  • s1icon s1icon-s-evernote
  • s1icon s1icon-s-answer-best
  • s1icon s1icon-s-answer-private
  • s1icon s1icon-s-answer-public
  • s1icon s1icon-s-article
  • s1icon s1icon-s-case-change-status
  • s1icon s1icon-s-case-comment
  • s1icon s1icon-s-case-email
  • s1icon s1icon-s-case-log-a-call
  • s1icon s1icon-s-case-transcript
  • s1icon s1icon-s-team-member

Friendlier Custom Icons

We have created a mapping of the SF1 custom icons to friendlier classnames. For example you can use .s1icon-c-heart instead of .s1icon-c-1. This should make the markup a little more readable.

Mouse over to view CSS classes.

  • s1icon s1icon-c-heart
  • s1icon s1icon-c-fan
  • s1icon s1icon-c-sun
  • s1icon s1icon-c-hexagon
  • s1icon s1icon-c-leaf
  • s1icon s1icon-c-triangle
  • s1icon s1icon-c-square
  • s1icon s1icon-c-diamond
  • s1icon s1icon-c-lightning
  • s1icon s1icon-c-moon
  • s1icon s1icon-c-star
  • s1icon s1icon-c-circle
  • s1icon s1icon-c-box
  • s1icon s1icon-c-hands
  • s1icon s1icon-c-people
  • s1icon s1icon-c-bank
  • s1icon s1icon-c-sack
  • s1icon s1icon-c-edit
  • s1icon s1icon-c-wrench
  • s1icon s1icon-c-airplane
  • s1icon s1icon-c-computer
  • s1icon s1icon-c-telephone
  • s1icon s1icon-c-envelope
  • s1icon s1icon-c-building
  • s1icon s1icon-c-alarmclock
  • s1icon s1icon-c-flag
  • s1icon s1icon-c-laptop
  • s1icon s1icon-c-smartphone
  • s1icon s1icon-c-tablet
  • s1icon s1icon-c-dish
  • s1icon s1icon-c-car
  • s1icon s1icon-c-factory
  • s1icon s1icon-c-desk
  • s1icon s1icon-c-bug
  • s1icon s1icon-c-mic
  • s1icon s1icon-c-train
  • s1icon s1icon-c-bridge
  • s1icon s1icon-c-camera
  • s1icon s1icon-c-telescope
  • s1icon s1icon-c-creditcard
  • s1icon s1icon-c-cash
  • s1icon s1icon-c-treasurechest
  • s1icon s1icon-c-jewel
  • s1icon s1icon-c-hammer
  • s1icon s1icon-c-ticket
  • s1icon s1icon-c-stamp
  • s1icon s1icon-c-knight
  • s1icon s1icon-c-trophy
  • s1icon s1icon-c-cd
  • s1icon s1icon-c-bigtop
  • s1icon s1icon-c-apple
  • s1icon s1icon-c-football
  • s1icon s1icon-c-bell
  • s1icon s1icon-c-boat
  • s1icon s1icon-c-books
  • s1icon s1icon-c-bottle
  • s1icon s1icon-c-buildingblock
  • s1icon s1icon-c-caduceus
  • s1icon s1icon-c-can
  • s1icon s1icon-c-umbrella
  • s1icon s1icon-c-castle
  • s1icon s1icon-c-chalkboard
  • s1icon s1icon-c-chip
  • s1icon s1icon-c-compass
  • s1icon s1icon-c-cup
  • s1icon s1icon-c-dice
  • s1icon s1icon-c-gears
  • s1icon s1icon-c-globe
  • s1icon s1icon-c-guitar
  • s1icon s1icon-c-saw
  • s1icon s1icon-c-headphones
  • s1icon s1icon-c-helicoptor
  • s1icon s1icon-c-highwaysign
  • s1icon s1icon-c-hotairballoon
  • s1icon s1icon-c-ipphone
  • s1icon s1icon-c-keys
  • s1icon s1icon-c-lock
  • s1icon s1icon-c-map
  • s1icon s1icon-c-tapemeasure
  • s1icon s1icon-c-motorcycle
  • s1icon s1icon-c-musicnote
  • s1icon s1icon-c-whistle
  • s1icon s1icon-c-pencil
  • s1icon s1icon-c-presenter
  • s1icon s1icon-c-forsale
  • s1icon s1icon-c-redcross
  • s1icon s1icon-c-safe
  • s1icon s1icon-c-sailboat
  • s1icon s1icon-c-saxophone
  • s1icon s1icon-c-scales
  • s1icon s1icon-c-shield
  • s1icon s1icon-c-ship
  • s1icon s1icon-c-shoppingcart
  • s1icon s1icon-c-stethoscope
  • s1icon s1icon-c-stopwatch
  • s1icon s1icon-c-streetsign
  • s1icon s1icon-c-thermometer
  • s1icon s1icon-c-van
  • s1icon s1icon-c-tv
  • s1icon s1icon-c-tvwidescreen

Custom Icons

If you would rather use the numeric classes for custom icons you can do so.

Mouse over to view CSS classes.

  • s1icon s1icon-c-1
  • s1icon s1icon-c-2
  • s1icon s1icon-c-3
  • s1icon s1icon-c-4
  • s1icon s1icon-c-5
  • s1icon s1icon-c-6
  • s1icon s1icon-c-7
  • s1icon s1icon-c-8
  • s1icon s1icon-c-9
  • s1icon s1icon-c-10
  • s1icon s1icon-c-11
  • s1icon s1icon-c-12
  • s1icon s1icon-c-13
  • s1icon s1icon-c-14
  • s1icon s1icon-c-15
  • s1icon s1icon-c-16
  • s1icon s1icon-c-17
  • s1icon s1icon-c-18
  • s1icon s1icon-c-19
  • s1icon s1icon-c-20
  • s1icon s1icon-c-21
  • s1icon s1icon-c-22
  • s1icon s1icon-c-23
  • s1icon s1icon-c-24
  • s1icon s1icon-c-25
  • s1icon s1icon-c-26
  • s1icon s1icon-c-27
  • s1icon s1icon-c-28
  • s1icon s1icon-c-29
  • s1icon s1icon-c-30
  • s1icon s1icon-c-31
  • s1icon s1icon-c-32
  • s1icon s1icon-c-33
  • s1icon s1icon-c-34
  • s1icon s1icon-c-35
  • s1icon s1icon-c-36
  • s1icon s1icon-c-37
  • s1icon s1icon-c-38
  • s1icon s1icon-c-39
  • s1icon s1icon-c-40
  • s1icon s1icon-c-41
  • s1icon s1icon-c-42
  • s1icon s1icon-c-43
  • s1icon s1icon-c-44
  • s1icon s1icon-c-45
  • s1icon s1icon-c-46
  • s1icon s1icon-c-47
  • s1icon s1icon-c-48
  • s1icon s1icon-c-49
  • s1icon s1icon-c-50
  • s1icon s1icon-c-51
  • s1icon s1icon-c-52
  • s1icon s1icon-c-53
  • s1icon s1icon-c-54
  • s1icon s1icon-c-55
  • s1icon s1icon-c-56
  • s1icon s1icon-c-57
  • s1icon s1icon-c-58
  • s1icon s1icon-c-59
  • s1icon s1icon-c-60
  • s1icon s1icon-c-61
  • s1icon s1icon-c-62
  • s1icon s1icon-c-63
  • s1icon s1icon-c-64
  • s1icon s1icon-c-65
  • s1icon s1icon-c-66
  • s1icon s1icon-c-67
  • s1icon s1icon-c-68
  • s1icon s1icon-c-69
  • s1icon s1icon-c-70
  • s1icon s1icon-c-71
  • s1icon s1icon-c-72
  • s1icon s1icon-c-73
  • s1icon s1icon-c-74
  • s1icon s1icon-c-75
  • s1icon s1icon-c-76
  • s1icon s1icon-c-77
  • s1icon s1icon-c-78
  • s1icon s1icon-c-79
  • s1icon s1icon-c-80
  • s1icon s1icon-c-81
  • s1icon s1icon-c-82
  • s1icon s1icon-c-83
  • s1icon s1icon-c-84
  • s1icon s1icon-c-85
  • s1icon s1icon-c-86
  • s1icon s1icon-c-87
  • s1icon s1icon-c-88
  • s1icon s1icon-c-89
  • s1icon s1icon-c-90
  • s1icon s1icon-c-91
  • s1icon s1icon-c-92
  • s1icon s1icon-c-93
  • s1icon s1icon-c-94
  • s1icon s1icon-c-95
  • s1icon s1icon-c-96
  • s1icon s1icon-c-97
  • s1icon s1icon-c-98
  • s1icon s1icon-c-99
  • s1icon s1icon-c-100

Utility Icons

These are font based icons that can be used similar to the Glyphicons in Bootstrap.

  • s1utility s1utility-success
  • s1utility s1utility-attach
  • s1utility s1utility-bookmark
  • s1utility s1utility-call
  • s1utility s1utility-chat
  • s1utility s1utility-checkin
  • s1utility s1utility-chevronleft
  • s1utility s1utility-chevronright
  • s1utility s1utility-close
  • s1utility s1utility-down
  • s1utility s1utility-download
  • s1utility s1utility-email
  • s1utility s1utility-groups
  • s1utility s1utility-image
  • s1utility s1utility-left
  • s1utility s1utility-like
  • s1utility s1utility-link
  • s1utility s1utility-list
  • s1utility s1utility-location
  • s1utility s1utility-logout
  • s1utility s1utility-people
  • s1utility s1utility-photo
  • s1utility s1utility-reply
  • s1utility s1utility-right
  • s1utility s1utility-up
  • s1utility s1utility-upload
  • s1utility s1utility-user
  • s1utility s1utility-filter
  • s1utility s1utility-help
  • s1utility s1utility-error
  • s1utility s1utility-warning
  • s1utility s1utility-adduser
  • s1utility s1utility-add
  • s1utility s1utility-edit
  • s1utility s1utility-back
  • s1utility s1utility-lock
  • s1utility s1utility-info
  • s1utility s1utility-frozen
  • s1utility s1utility-spinner
  • s1utility s1utility-news
  • s1utility s1utility-dash
  • s1utility s1utility-question
  • s1utility s1utility-refresh
  • s1utility s1utility-socialshare
  • s1utility s1utility-priority
  • s1utility s1utility-search
  • s1utility s1utility-rows
  • s1utility s1utility-event
  • s1utility s1utility-settings
  • s1utility s1utility-check
  • s1utility s1utility-notification
  • s1utility s1utility-share
  • s1utility s1utility-favorite
  • s1utility s1utility-sms
  • s1utility s1utility-push