Icon

Available since 1.0.0

Icons are used throughout the UI to save space, allow for visual clarity and focus, and for fun.

Icons can be used adaptively if desired, but at this point they are used more as visual elements within other components.


Icon usage and size options

<span class="sap-icon--cart sap-icon--s"></span>
<span class="sap-icon--cart"></span>
<span class="sap-icon--cart sap-icon--m"></span>
<span class="sap-icon--cart sap-icon--l"></span>
<span class="sap-icon--cart sap-icon--xl"></span>


Icon animations

<span class="sap-icon--synchronize sap-icon--xl sap-icon--animate-spin"></span>
<span class="sap-icon--synchronize sap-icon--xl sap-icon--animate-pulse"></span>

Available Icons

.sap-icon--accidental-leave
.sap-icon--account
.sap-icon--wrench
.sap-icon--windows-doors
.sap-icon--washing-machine
.sap-icon--visits
.sap-icon--video
.sap-icon--travel-expense
.sap-icon--temperature
.sap-icon--task
.sap-icon--synchronize
.sap-icon--survey
.sap-icon--settings
.sap-icon--search
.sap-icon--sales-document
.sap-icon--retail-store
.sap-icon--refresh
.sap-icon--product
.sap-icon--present
.sap-icon--ppt-attachment
.sap-icon--pool
.sap-icon--pie-chart
.sap-icon--picture
.sap-icon--photo-voltaic
.sap-icon--phone
.sap-icon--pending
.sap-icon--pdf-attachment
.sap-icon--past
.sap-icon--outgoing-call
.sap-icon--opportunity
.sap-icon--opportunities
.sap-icon--notes
.sap-icon--money-bills
.sap-icon--map
.sap-icon--log
.sap-icon--line-charts
.sap-icon--lightbulb
.sap-icon--leads
.sap-icon--lead
.sap-icon--laptop
.sap-icon--kpi-managing-my-area
.sap-icon--kpi-corporate-performance
.sap-icon--incoming-call
.sap-icon--inbox
.sap-icon--horizontal-bar-chart
.sap-icon--history
.sap-icon--heating-cooling
.sap-icon--gantt-bars
.sap-icon--future
.sap-icon--fridge
.sap-icon--fallback
.sap-icon--expense-report
.sap-icon--excel-attachment
.sap-icon--energy-saving-lightbulb
.sap-icon--employee
.sap-icon--email
.sap-icon--edit
.sap-icon--duplicate
.sap-icon--download
.sap-icon--doc-attachment
.sap-icon--dishwasher
.sap-icon--delete
.sap-icon--decline
.sap-icon--complete
.sap-icon--competitor
.sap-icon--collections-management
.sap-icon--chalkboard
.sap-icon--cart
.sap-icon--card
.sap-icon--camera
.sap-icon--calendar
.sap-icon--begin
.sap-icon--basket
.sap-icon--bar-chart
.sap-icon--attachment
.sap-icon--arrow-top
.sap-icon--arrow-right
.sap-icon--arrow-left
.sap-icon--arrow-bottom
.sap-icon--approvals
.sap-icon--appointment
.sap-icon--alphabetical-order
.sap-icon--along-stacked-chart
.sap-icon--alert
.sap-icon--addresses
.sap-icon--address-book
.sap-icon--add-filter
.sap-icon--add-favorite
.sap-icon--add
.sap-icon--activities
.sap-icon--action
.sap-icon--accept
.sap-icon--hint
.sap-icon--group
.sap-icon--check-availability
.sap-icon--weather-proofing
.sap-icon--payment-approval
.sap-icon--batch-payments
.sap-icon--bed
.sap-icon--arobase
.sap-icon--family-care
.sap-icon--favorite
.sap-icon--navigation-right-arrow
.sap-icon--navigation-left-arrow
.sap-icon--e-care
.sap-icon--less
.sap-icon--lateness
.sap-icon--lab
.sap-icon--internet-browser
.sap-icon--instance
.sap-icon--inspection
.sap-icon--image-viewer
.sap-icon--home
.sap-icon--grid
.sap-icon--goalseek
.sap-icon--general-leave-request
.sap-icon--create-leave-request
.sap-icon--flight
.sap-icon--filter
.sap-icon--favorite-list
.sap-icon--factory
.sap-icon--endoscopy
.sap-icon--employee-pane
.sap-icon--employee-approvals
.sap-icon--email-read
.sap-icon--electrocardiogram
.sap-icon--documents
.sap-icon--decision
.sap-icon--database
.sap-icon--customer-history
.sap-icon--customer
.sap-icon--credit-card
.sap-icon--create-entry-time
.sap-icon--contacts
.sap-icon--compare
.sap-icon--clinical-order
.sap-icon--chain-link
.sap-icon--pull-down
.sap-icon--cargo-train
.sap-icon--car-rental
.sap-icon--business-card
.sap-icon--bar-code
.sap-icon--folder-blank
.sap-icon--passenger-train
.sap-icon--question-mark
.sap-icon--world
.sap-icon--iphone
.sap-icon--ipad
.sap-icon--warning
.sap-icon--sort
.sap-icon--course-book
.sap-icon--course-program
.sap-icon--add-coursebook
.sap-icon--print
.sap-icon--save
.sap-icon--play
.sap-icon--pause
.sap-icon--record
.sap-icon--response
.sap-icon--pushpin-on
.sap-icon--pushpin-off
.sap-icon--unfavorite
.sap-icon--learning-assistant
.sap-icon--timesheet
.sap-icon--time-entry-request
.sap-icon--list
.sap-icon--action-settings
.sap-icon--share
.sap-icon--feed
.sap-icon--role
.sap-icon--flag
.sap-icon--post
.sap-icon--inspect
.sap-icon--inspect-down
.sap-icon--appointment-2
.sap-icon--target-group
.sap-icon--marketing-campaign
.sap-icon--message-error
.sap-icon--notification
.sap-icon--comment
.sap-icon--shipping-status
.sap-icon--collaborate
.sap-icon--shortcut
.sap-icon--lead-outdated
.sap-icon--tools-opportunity
.sap-icon--permission
.sap-icon--supplier
.sap-icon--table-view
.sap-icon--table-chart
.sap-icon--switch-views
.sap-icon--e-learning
.sap-icon--manager
.sap-icon--switch-classes
.sap-icon--simple-payment
.sap-icon--signature
.sap-icon--sales-order-item
.sap-icon--sales-order
.sap-icon--request
.sap-icon--receipt
.sap-icon--puzzle
.sap-icon--process
.sap-icon--private
.sap-icon--popup-window
.sap-icon--person-placeholder
.sap-icon--per-diem
.sap-icon--paper-plane
.sap-icon--paid-leave
.sap-icon--pdf-reader
.sap-icon--overview-chart
.sap-icon--overlay
.sap-icon--org-chart
.sap-icon--number-sign
.sap-icon--notification-2
.sap-icon--my-sales-order
.sap-icon--meal
.sap-icon--loan
.sap-icon--order-status
.sap-icon--customer-order-entry
.sap-icon--performance
.sap-icon--menu
.sap-icon--employee-lookup
.sap-icon--education
.sap-icon--customer-briefing
.sap-icon--customer-and-contacts
.sap-icon--my-view
.sap-icon--accelerated
.sap-icon--to-be-reviewed
.sap-icon--warning2
.sap-icon--feeder-arrow
.sap-icon--quality-issue
.sap-icon--workflow-tasks
.sap-icon--create
.sap-icon--home-share
.sap-icon--globe
.sap-icon--tags
.sap-icon--work-history
.sap-icon--x-ray
.sap-icon--wounds-doc
.sap-icon--web-cam
.sap-icon--waiver
.sap-icon--vertical-bar-chart
.sap-icon--upstacked-chart
.sap-icon--trip-report
.sap-icon--microphone
.sap-icon--unpaid-leave
.sap-icon--tree
.sap-icon--toaster-up
.sap-icon--toaster-top
.sap-icon--toaster-down
.sap-icon--time-account
.sap-icon--theater
.sap-icon--taxi
.sap-icon--subway-train
.sap-icon--study-leave
.sap-icon--stethoscope
.sap-icon--step
.sap-icon--sonography
.sap-icon--soccor
.sap-icon--physical-activity
.sap-icon--pharmacy
.sap-icon--official-service
.sap-icon--offsite-work
.sap-icon--nutrition-activity
.sap-icon--newspaper
.sap-icon--monitor-payments
.sap-icon--map-2
.sap-icon--machine
.sap-icon--mri-scan
.sap-icon--end-user-experience-monitoring
.sap-icon--unwired
.sap-icon--customer-financial-fact-sheet
.sap-icon--retail-store-manager
.sap-icon--Netweaver-business-client
.sap-icon--electronic-medical-record
.sap-icon--eam-work-order
.sap-icon--customer-view
.sap-icon--crm-service-manager
.sap-icon--crm-sales
.sap-icon--widgets
.sap-icon--commission-check
.sap-icon--collections-insight
.sap-icon--clinical-tast-tracker
.sap-icon--citizen-connect
.sap-icon--cart-approval
.sap-icon--capital-projects
.sap-icon--bo-strategy-management
.sap-icon--business-objects-mobile
.sap-icon--business-objects-explorer
.sap-icon--business-objects-experience
.sap-icon--bbyd-dashboard
.sap-icon--bbyd-active-sales
.sap-icon--business-by-design
.sap-icon--business-one
.sap-icon--sap-box
.sap-icon--manager-insight
.sap-icon--accounting-document-verification
.sap-icon--hr-approval
.sap-icon--idea-wall
.sap-icon--Chart-Tree-Map
.sap-icon--cart-5
.sap-icon--cart-4
.sap-icon--wallet
.sap-icon--vehicle-repair
.sap-icon--upload
.sap-icon--unlocked
.sap-icon--umbrella
.sap-icon--travel-request
.sap-icon--travel-expense-report
.sap-icon--travel-itinerary
.sap-icon--time-overtime
.sap-icon--thing-type
.sap-icon--technical-object
.sap-icon--tag
.sap-icon--syringe
.sap-icon--syntax
.sap-icon--suitcase
.sap-icon--simulate
.sap-icon--shield
.sap-icon--share-2
.sap-icon--sales-quote
.sap-icon--repost
.sap-icon--provision
.sap-icon--projector
.sap-icon--add-product
.sap-icon--pipeline-analysis
.sap-icon--add-photo
.sap-icon--palette
.sap-icon--nurse
.sap-icon--sales-notification
.sap-icon--mileage
.sap-icon--meeting-room
.sap-icon--media-forward
.sap-icon--media-play
.sap-icon--media-pause
.sap-icon--media-reverse
.sap-icon--media-rewind
.sap-icon--measurement-document
.sap-icon--measuring-point
.sap-icon--measure
.sap-icon--map-3
.sap-icon--locked
.sap-icon--letter
.sap-icon--journey-arrive
.sap-icon--journey-change
.sap-icon--journey-depart
.sap-icon--it-system
.sap-icon--it-instance
.sap-icon--it-host
.sap-icon--iphone-2
.sap-icon--ipad-2
.sap-icon--inventory
.sap-icon--insurance-house
.sap-icon--insurance-life
.sap-icon--insurance-car
.sap-icon--initiative
.sap-icon--incident
.sap-icon--group-2
.sap-icon--goal
.sap-icon--functional-location
.sap-icon--full-screen
.sap-icon--form
.sap-icon--fob-watch
.sap-icon--blank-tag
.sap-icon--family-protection
.sap-icon--folder
.sap-icon--fax-machine
.sap-icon--example
.sap-icon--eraser
.sap-icon--employee-rejections
.sap-icon--drop-down-list
.sap-icon--draw-rectangle
.sap-icon--document
.sap-icon--doctor
.sap-icon--discussion-2
.sap-icon--discussion
.sap-icon--dimension
.sap-icon--customer-and-supplier
.sap-icon--crop
.sap-icon--add-contact
.sap-icon--compare-2
.sap-icon--color-fill
.sap-icon--collision
.sap-icon--curriculum
.sap-icon--chart-axis
.sap-icon--full-stacked-chart
.sap-icon--full-stacked-column-chart
.sap-icon--vertical-bar-chart-2
.sap-icon--horizontal-bar-chart-2
.sap-icon--horizontal-stacked-chart
.sap-icon--vertical-stacked-chart
.sap-icon--choropleth-chart
.sap-icon--geographic-bubble-chart
.sap-icon--multiple-radar-chart
.sap-icon--radar-chart
.sap-icon--crossed-line-chart
.sap-icon--multiple-line-chart
.sap-icon--multiple-bar-chart
.sap-icon--line-chart
.sap-icon--line-chart-dual-axis
.sap-icon--bubble-chart
.sap-icon--scatter-chart
.sap-icon--multiple-pie-chart
.sap-icon--column-chart-dual-axis
.sap-icon--tag-cloud-chart
.sap-icon--area-chart
.sap-icon--cause
.sap-icon--cart-3
.sap-icon--cart-2
.sap-icon--bus-public-transport
.sap-icon--burglary
.sap-icon--building
.sap-icon--border
.sap-icon--bookmark
.sap-icon--badge
.sap-icon--attachment-audio
.sap-icon--attachment-video
.sap-icon--attachment-html
.sap-icon--attachment-photo
.sap-icon--attachment-e-pub
.sap-icon--attachment-zip-file
.sap-icon--attachment-text-file
.sap-icon--add-equipment
.sap-icon--add-activity
.sap-icon--activity-individual
.sap-icon--activity-2
.sap-icon--add-activity-2
.sap-icon--activity-items
.sap-icon--activity-assigned-to-goal
.sap-icon--status-positive
.sap-icon--status-completed
.sap-icon--status-negative
.sap-icon--status-error
.sap-icon--status-inactive
.sap-icon--status-critical
.sap-icon--status-in-progress
.sap-icon--blank-tag-2
.sap-icon--cart-full
.sap-icon--locate-me
.sap-icon--paging
.sap-icon--company-view
.sap-icon--document-text
.sap-icon--explorer
.sap-icon--personnel-view
.sap-icon--sorting-ranking
.sap-icon--drill-down
.sap-icon--drill-up
.sap-icon--vds-file
.sap-icon--sap-logo-shape
.sap-icon--folder-full
.sap-icon--system-exit
.sap-icon--system-exit-2
.sap-icon--close-command-field
.sap-icon--open-command-field
.sap-icon--sys-enter-2
.sap-icon--sys-enter
.sap-icon--sys-help-2
.sap-icon--sys-help
.sap-icon--sys-back
.sap-icon--sys-back-2
.sap-icon--sys-cancel
.sap-icon--sys-cancel-2
.sap-icon--open-folder
.sap-icon--sys-find-next
.sap-icon--sys-find
.sap-icon--sys-monitor
.sap-icon--sys-prev-page
.sap-icon--sys-first-page
.sap-icon--sys-next-page
.sap-icon--sys-last-page
.sap-icon--generate-shortcut
.sap-icon--create-session
.sap-icon--display-more
.sap-icon--enter-more
.sap-icon--zoom-in
.sap-icon--zoom-out
.sap-icon--header
.sap-icon--detail-view
.sap-icon--show-edit
.sap-icon--collapse
.sap-icon--expand
.sap-icon--positive
.sap-icon--negative
.sap-icon--display
.sap-icon--menu2
.sap-icon--redo
.sap-icon--undo
.sap-icon--navigation-up-arrow
.sap-icon--navigation-down-arrow
.sap-icon--down
.sap-icon--up
.sap-icon--shelf
.sap-icon--background
.sap-icon--resize
.sap-icon--move
.sap-icon--show
.sap-icon--hide
.sap-icon--nav-back
.sap-icon--error
.sap-icon--slim-arrow-right
.sap-icon--slim-arrow-left
.sap-icon--slim-arrow-down
.sap-icon--slim-arrow-up
.sap-icon--forward
.sap-icon--overflow
.sap-icon--value-help
.sap-icon--multiselect
.sap-icon--exitfullscreen
.sap-icon--sys-add
.sap-icon--sys-minus
.sap-icon--dropdown
.sap-icon--expand-group
.sap-icon--vertical-grip
.sap-icon--horizontal-grip
.sap-icon--sort-descending
.sap-icon--sort-ascending
.sap-icon--arrow-down
.sap-icon--legend
.sap-icon--collapse-group
.sap-icon--message-warning
.sap-icon--message-information
.sap-icon--message-success
.sap-icon--restart
.sap-icon--stop
.sap-icon--add-process
.sap-icon--cancel-maintenance
.sap-icon--activate
.sap-icon--resize-horizontal
.sap-icon--resize-vertical
.sap-icon--connected
.sap-icon--disconnected
.sap-icon--edit-outside
.sap-icon--key
.sap-icon--minimize
.sap-icon--back-to-top
.sap-icon--hello-world
.sap-icon--outbox
.sap-icon--donut-chart
.sap-icon--heatmap-chart
.sap-icon--horizontal-bullet-chart
.sap-icon--vertical-bullet-chart
.sap-icon--call
.sap-icon--download-from-cloud
.sap-icon--upload-to-cloud
.sap-icon--jam
.sap-icon--sap-ui5
.sap-icon--message-popup
.sap-icon--cloud
.sap-icon--horizontal-waterfall-chart
.sap-icon--vertical-waterfall-chart
.sap-icon--broken-link
.sap-icon--headset
.sap-icon--thumb-up
.sap-icon--thumb-down
.sap-icon--multiselect-all
.sap-icon--multiselect-none
.sap-icon--scissors
.sap-icon--sound
.sap-icon--sound-loud
.sap-icon--sound-off
.sap-icon--date-time
.sap-icon--user-settings
.sap-icon--key-user-settings
.sap-icon--developer-settings
.sap-icon--text-formatting
.sap-icon--bold-text
.sap-icon--italic-text
.sap-icon--underline-text
.sap-icon--text-align-justified
.sap-icon--text-align-left
.sap-icon--text-align-center
.sap-icon--text-align-right
.sap-icon--bullet-text
.sap-icon--numbered-text
.sap-icon--co
.sap-icon--ui-notifications
.sap-icon--bell
.sap-icon--cancel-share
.sap-icon--write-new-document
.sap-icon--write-new
.sap-icon--cancel
.sap-icon--screen-split-one
.sap-icon--screen-split-two
.sap-icon--screen-split-three
.sap-icon--customize
.sap-icon--user-edit
.sap-icon--source-code
.sap-icon--copy
.sap-icon--paste
.sap-icon--line-chart-time-axis
.sap-icon--clear-filter
.sap-icon--reset
.sap-icon--trend-up
.sap-icon--trend-down
.sap-icon--cursor
.sap-icon--add-document
.sap-icon--create-form
.sap-icon--resize-corner
.sap-icon--chevron-phase
.sap-icon--chevron-phase-2
.sap-icon--rhombus-milestone
.sap-icon--rhombus-milestone-2
.sap-icon--circle-task
.sap-icon--circle-task-2
.sap-icon--project-definition-triangle
.sap-icon--project-definition-triangle-2
.sap-icon--master-task-triangle
.sap-icon--master-task-triangle-2
.sap-icon--program-triangles
.sap-icon--program-triangles-2
.sap-icon--mirrored-task-circle
.sap-icon--mirrored-task-circle-2
.sap-icon--checklist-item
.sap-icon--checklist-item-2
.sap-icon--checklist
.sap-icon--checklist-2
.sap-icon--chart-table-view
.sap-icon--filter-analytics
.sap-icon--filter-facets
.sap-icon--filter-fields
.sap-icon--indent
.sap-icon--outdent
.sap-icon--heading-1
.sap-icon--heading-2
.sap-icon--heading-3
.sap-icon--decrease-line-height
.sap-icon--increase-line-height
.sap-icon--fx
.sap-icon--add-folder
.sap-icon--away
.sap-icon--busy
.sap-icon--appear-offline
.sap-icon--blur
.sap-icon--pixelate
.sap-icon--horizontal-combination-chart
.sap-icon--add-employee
.sap-icon--text-color
.sap-icon--browse-folder
.sap-icon--primary-key
.sap-icon--two-keys
.sap-icon--strikethrough
.sap-icon--text
.sap-icon--responsive
.sap-icon--desktop-mobile
.sap-icon--table-row
.sap-icon--table-column
.sap-icon--validate
.sap-icon--keyboard-and-mouse
.sap-icon--touch
.sap-icon--expand-all
.sap-icon--collapse-all
.sap-icon--combine
.sap-icon--split
.sap-icon--megamenu
.sap-icon--feedback
.sap-icon--information
.sap-icon--s4hana
.sap-icon--translate