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--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-negative

.sap-icon--status-inactive

.sap-icon--status-critical

.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--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