Status
| PublishedElement can be used in production | |
Documentation | In progressElement design and development in progress |
| PublishedElement can be used in production |
Icons
Icons represent items and ideas in a simple graphic format. They help communicate with universal understanding.
Contents
Monoline versus filled Copy link to this section
Copy link to this section
| Icon | Use case |
|---|---|
| Monoline | Monoline icons are the default style, and can be used in most cases to visually enhance meaning regarding user interaction or messaging. |
| Filled | Filled icons should only be used to convey an “on” or “pressed” state of their monoline icon counterparts, where the monoline version shows the default appearance or rest state. Filled icons are not intended for use without interactions that toggle a binary choice, such as “on” and “off” or “saved” and “unsaved”. |
| Half-filled | Half-filled icons, such as star or heart icons, are intended for use with ratings. |
SVG versus icon fontCopy link to this section
Copy link to this section
The Dell Design System offers two formats for icons: icon fonts and SVGs. Choose the one that best suits your purpose.
| Format | Use case |
|---|---|
| SVG | SVGs or Scalable Vector Graphics are vector-based graphics in XML format. SVG icons are scalable to any size without affecting image quality and have better anti-aliasing than icon fonts. This type of icon can be magnified and printed in high quality at any size, and every attribute can be animated. Since SVG icons are simply a block of code that loads inline with page content, they can load faster and cleaner. However, inline SVGs cannot be cached by the browser, leading to longer load times for pages with many icons. They also do not have the same cross-browser support as icon fonts. However, Dell uses a sprite builder to help decrease load times. SVG icons also have accessibility advantages over icon fonts, since they are treated as images and come with built-in semantic elements like < title > and < desc > that work with screen readers and text-based browsers. They are also compatible with WAI-ARIA specifications. Choose SVG icons if you are using a large number of multicolored icons with animations. |
| Icon font | Icon fonts are actual fonts that consist of symbols and glyphs instead of numbers and letters. Icon fonts are able to scale to any resolution without loss of image quality and usually have slightly smaller file sizes than SVG icons. However, like regular fonts, icon fonts are subject to browser font rendering algorithms, sometimes resulting in blurry or pixelated icons when size increases. Icon fonts can be cached by web browsers, making them ideal for pages using a few icons without animations or multicolor modifications, but on pages with complex formatting, icon fonts may flash as font libraries are loading. Choose font icons if you need a few icons without any multicolor modifications or animations. |
Embed SVGs or install fontsCopy link to this section
Copy link to this section
Visit Storybook for instructions.
ResourcesCopy link to this section
Copy link to this section
Icon and illustration brand guidelines
To learn about Dell’s icon set and review specifications and branding, visit Dell’s Brand site.
Social icons
Social sharing icons are not part of the Dell Design System Icon Library. Find them in Dell’s Digital Asset Management (DAM) library.
Icon requests and contributions
Need an icon not found in our library or would like to contribute to the Dell Design System icon set? Fill out our Feedback Form.
ArticlesCopy link to this section
Copy link to this section
Read the Nielsen Norman Group's article on icons.
StandardsCopy link to this section
Copy link to this section
Accessibility
Support icons with visible text labels whenever possible
Adding visible text labels, such as the word “share” next to a share icon, reduces ambiguity and increases clarity for all. If adding a label is not possible, add alt text that describes the icon’s purpose.
WCAG 2.1: 1.1.1 Non-text Content
Use icon stroke width to determine contrast ratio
Icons that convey meaning are subject to specific contrast requirements, depending on stroke width. Requirements are shown in actual size, not magnified. Nearly all Dell Design System icons require a higher contrast of 4.5:1. For example, a 16-pixel by 16-pixel icon with a typical stroke width of 1 pixel would need to be sized at 48 pixels or more to reach the lower contrast requirement of 3:1.
| Icon style | Contrast requirements |
|---|---|
| Icons with stroke widths of less than 2 pixels | 4.5:1 |
| Filled icons or icons with stroke widths of 3 pixels and above | 3:1 |
WCAG 2.1: 1.4.11 Non-Text Contrast
Choose icons that are universally recognizable
As a rule, the only icons with near-universal recognition are:
• House, meaning home (dds2_home)
• Magnifying glass, meaning search (dds2_search)
• Printer, meaning print (dds2_print)
If using a different icon, conduct user research to ensure the meaning will be understood by users with all abilities. Ideally, it should have a label associated with it.
SEO guidelines
Use SVG icons whenever possible
SVG is the preferred icon format for SEO. An SVG icon loads as a line of code, decreasing page load speed and improving SEO performance.
Describe SVG icons with tags
Use the title tag in an SVG icon to name or describe the icon in a way that will assist SEO performance and accessibility. A
| Icon | Alt text example |
|---|---|
 | alt=“chat with a Dell Technologies Advisor - 8 a.m. to 10 p.m. CST” |
 | alt=“Email a Dell Sales Expert” |
 | alt=“Call Dell Toll-free 1-877-717-3355” |
Icon galleryCopy link to this section
Copy link to this section
To use an icon, copy and paste the code associated with the icon you want. For SVG icons, copy the top line of code with the icon name, and for font icons, copy the Unicode value beginning with a backslash on the second line.
2-in-1
\eaa3
accessibility
\267f
add-cir
\e91d
add-sqr
\229e
airplane
\1f6ea
alarm-bell
\1f56d
alarm-clock
\1f551
alert-check-cir
\1f5f8
alert-check-sqr
\1f5f9
alert-error
\26d4
alert-info-cir
\1f6c8
alert-info-sqr
\e90c
alert-notice
\26a0
app-window
\1f5d4
app-window-search
\e90f
arrange
\e910
arrow-cir-down
\2b73
arrow-cir-left
\2b70
arrow-cir-right
\2b72
arrow-cir-up
\2b71
arrow-down
\2193
arrow-export
\2197
arrow-left
\2190
arrow-right
\2192
arrow-tri-down
\25bd
arrow-tri-left
\25c1
arrow-tri-right
\25b7
arrow-tri-solid-right
\23f5
arrow-tri-solid-stacked
\e912
arrow-tri-up
\20e4
arrow-up
\2191
assistance
\1f481
audio-card
\e920
audio-speaker
\1f508
audio-speaker-levels
\e922
audio-speaker-mute
\1f507
audio-speaker-off
\e924
audio-speaker-on
\1f50a
award-certificate
\1f397
award-trophy
\1f3c6
barbell
\e915
battery-charge
\1f50b
battery-empty
\e929
battery-horiz-empty
\e92a
battery-horiz-full
\e92b
battery-horiz-half
\e92c
battery-vert-full
\e92d
battery-vert-half
\e92e
bluetooth
\e92f
bolt
\1f5f2
book-open
\1f4d6
bookmark
\1f516
bookmark-filled
\e939
brand-alienware
\e933
brand-dell
\e934
brand-dell-gaming
\e90a
brand-delltechnologies
\e937
brand-delltechnologiesvert
\e938
brand-skype
\e902
brand-windows
\e90e
brand-xps
\eaa6
brightness
\1f505
calculator
\1f5a9
calendar
\1f4c5
calendar-add
\e925
calendar-check
\e926
calendar-remove
\e927
calendar-search
\e93c
camera
\1f4f7
cancelled
\20e0
capture-image
\2b
card-credit
\1f4b4
card-info
\1f4b3
card-swipe-left
\e941
card-swipe-right
\e942
carry-case
\1f4bc
cart
\1f6d2
chain-link
\1f587
charge-back
\1f4b0
charge-back-folder
\e947
charge-back-report
\e948
chart-bars-axis
\1f4ca
chart-bars-box
\1f4c9
chart-insights
\1f4c8
chat-bot
\1f916
chat-dots
\1f4ac
check
\2713
check-property
\e94e
chevron-cir-down
\2b8b
chevron-cir-left
\2b88
chevron-cir-right
\2b8a
chevron-cir-up
\2b89
chevron-down
\fe40
chevron-left
\2329
chevron-right
\232a
chevron-up
\fe3f
chip-set
\25a6
clipboard
\1f4cb
clipboard-check
\e959
clipboard-lines
\e95a
clipboard-notes
\e95b
clipboard-remove
\e95c
clipboard-search
\e95d
clock
\1f552
clock-arrow-left
\1f553
clock-arrow-right
\1f555
clone
\1f5d7
close-back
\2326
close-cir
\1f5f5
close-sqr
\1f5f7
close-x
\1f5d9
cloud
\2601
cloud-check
\1f329
cloud-document
\e968
cloud-iq
\e969
cloud-restore
\e96a
cloud-upload
\e96b
cloud-wireless
\e96c
collapse-down
\e96d
collapse-down-sqr
\23ec
collapse-up
\e96f
collapse-up-sqr
\23eb
column-add
\e971
comment
\1f5e8
comment-add
\e973
comment-check
\e974
compare
\2966
conversation
\1f5ea
conversation-cir
\1f5eb
copy
\1f5c7
copy-alt
\1f5cd
cube
\1f4e6
currency
\24
currency-coins
\e97c
currency-coins-euros
\e91c
currency-coins-generic
\e91b
currency-coins-indian-rupees
\e91a
currency-coins-pounds
\e917
currency-coins-rupees
\e918
currency-coins-yen
\e919
cursor
\261d
cursor-clock
\e97e
d-display
\1f5b5
dashboard
\1f5e0
data-center
\1f3e2
data-compute
\1f5ad
data-protection
\eaa7
datastore
\1f5ac
debug
\1f41e
deploy
\e984
device-data-center
\1f5aa
device-desktop
\e923
device-laptop
\1f5b4
device-laptop-detachable
\e987
device-lock-screen
\e988
device-mobile
\1f581
device-modular
\1f4bb
device-monitor
\239a
device-nodes
\e98c
device-screen-size
\e98d
device-server
\1f5b6
device-server-tower
\1f5a5
device-storage-array
\e990
device-switch-blade
\e991
device-switch-blade-2U
\e992
device-tablet-horiz
\e993
device-tablet-vert
\e994
device-thin-client
\e995
diagnostic
\1f5e1
dimensions-weight
\1f4cf
disc-arrow-down
\e998
disc-arrow-up
\e999
disc-check
\e99a
disc-insert
\e99b
disc-recovery
\e99c
disc-secure
\e99d
disc-software
\1f5b8
disc-system
\e99f
doc-add
\1f5b9
doc-arrow-left
\1f5ba
doc-arrow-right
\1f5cb
doc-check
\e9a3
doc-cube
\e9a4
doc-lines
\1f5c8
doc-manual
\e9a6
doc-reports
\1f5c9
doc-search
\e9a9
doc-secure
\e9aa
doc-settings
\e9ab
doc-support
\e9ac
docs-copy-alt
\e9a8
document
\1f5cf
download
\e9ae
download-alt
\2913
ear
\1f442
ellipsis
\e909
energy-efficient
\1f333
escalate-tri
\29cb
exit-door
\21da
expand
\e916
eye-view-off
\e9b6
eye-view-on
\1f441
fan
\274b
filter
\26db
filter-add
\e9ba
filter-clear
\e9bb
filter-move
\e9bc
filter-remove
\e9bd
fingerprint
\1f446
flag
\26ff
flame
\1f525
flash-drive
\1f4bd
folder
\1f5c0
folder-add
\1f5c2
folder-arrow-right
\1f5bf
folder-arrow-up
\e9c5
folder-media
\e9c6
full-screen
\1f5d6
game-controller
\e91e
gaming-desktop
\e91f
gear
\2699
gear-arrow
\e9c9
gear-wrench
\e9ca
gift-card
\e903
globe-location
\e901
globe-simple
\1f310
graphics-card
\e9cd
hand-touch
\1f5a2
hand-touch-screen
\e9d0
handle
\22ee
hard-drive
\1f5ab
hd-generic
\e9d2
headphones
\e9d3
headset
\e9d4
heart
\2661
heart-filled
\2665
heart-half-filled
\e928
heat
\e9d5
help-cir
\2bd1
help-sqr
\e9d7
hinge
\1f5b3
home
\1f3e1
host-server
\e9d9
host-server-hex
\e9da
host-server-rack
\e9db
hyper-converged-infrastructure
\eaa8
import
\21a7
import-alt
\21a5
inbox
\1f4e5
inbox-arrow-down
\e9df
infrastructure
\e9e0
ink-toner
\1f5a8
key
\1f511
keyboard
\2328
keyboard-mouse
\1f5a6
keypad
\e9e5
laptop-generic
\1f5b7
lcd
\e9e7
lightbulb
\1f4a1
location
\1f4cd
location-play
\e9ea
lock-closed
\1f512
lock-open
\1f513
log-in
\2348
log-out
\e9ee
\1f582
mail-open
\1f586
manage-info
\e9f1
management-software
\e9f2
memory
\e9f3
memory-card-reader
\e9f4
memory-sd-card
\e9f5
menu-closed
\2630
metadata
\e904
microchip
\e9f8
microphone-off
\1f3a4
microphone-on
\e9fa
migrate
\e9fb
minimize
\e9fc
minus-minimize
\2212
missing-image
\26f6
mouse
\1f5b0
mouse-cord
\1f5af
movie-clapper
\1f3ac
movie-clapper-play
\1f3a6
music-note
\1f39d
network-connected
\ea04
network-horiz
\ea05
network-share
\ea06
network-vert
\1f5a7
network-vert-disable
\ea08
objects
\e905
office
\1f3e3
overflow
\22ef
package-closed
\ea0c
package-open
\ea0d
paint-brush
\1f58c
paint-palette
\1f3a8
paper-clip
\1f4ce
partners
\270b
partnership
\ea09
password
\ea12
pause
\23f8
pause-sqr
\ea14
pencil
\1f589
pencil-check
\1f58a
pencil-mark
\1f58e
pencil-remove
\ea18
performance
\23f2
phone
\1f57e
pie-chart
\ea1b
pie-chart-solid
\ea1c
pin
\1f4cc
play-cir
\23ef
play-sqr
\e906
plus-add
\e907
pop-up-arrow
\21f1
pop-up-arrow-corner
\ea26
popout-double
\ea21
popout-double-condense
\e914
popout-double-condense-vertical
\e913
popout-double-vertical
\e921
popout-share
\ea22
popout-window
\2398
popout-window-arrow
\ea24
port-double
\ea27
power-off
\ea28
power-on
\ea29
power-supply
\1f50c
power-supply-cord
\ea2b
power-supply-double
\ea2c
pre-seed
\eaa5
printer
\1f4e0
processor
\ea2e
productivity
\ea2f
projector
\1f4fe
protractor
\ea31
pulse
\ea32
puzzle
\ea33
qos
\ea34
rack
\ea35
receipt
\eaa4
recycle
\2672
recycle-bin
\267b
redo
\2b8e
redo-move
\27f3
refresh-spin
\1f5d8
removable-storage-usb
\ea3b
remove-cir
\229d
remove-sqr
\229f
reset
\27f2
restore
\2b79
rss
\ea40
save
\2357
save-disk
\1f4be
scale
\2912
search
\1f50d
search-arrow-left
\1f50e
search-arrow-right
\ea46
search-back
\23ee
search-forward
\23ed
server-rack-arrow-right
\ea49
server-rack-search
\ea4a
server-rack-support
\ea4b
share
\21b7
shield
\26c9
shield-check
\26ca
shield-protect
\ea4f
shipping
\ea50
skip-forward
\ea51
skip-to-end
\ea52
skip-to-front
\ea53
slider-horiz
\ea54
slider-vert
\1f39a
smart-select
\ea56
snapshot
\2bd0
snowflake
\2744
social-networking
\ea59
sort-az
\e908
sort-horiz
\2b82
sort-vert
\296e
sort-za
\ea5d
speaker-double
\ea5e
stack
\ea5f
star
\2729
star-filled
\2605
star-half-filled
\e930
start-up
\ea61
stop
\23f9
suspend
\ea63
sync-horiz
\2b94
sync-vert
\ea65
tag
\1f3f7
tag-deal
\e90b
task-check
\ea68
task-check-progress
\ea69
thumb-down
\1f44e
thumb-down-filled
\e931
thumb-up
\1f44d
thumb-up-filled
\e932
toolbox
\ea6c
touch-pad
\ea6d
trash
\1f5d1
tv
\1f4fa
undo
\2b8c
undo-move
\2b6e
upload
\2b6b
usb
\ea73
user
\1f469
user-about
\ea75
user-add
\ea76
user-check
\ea77
user-cir
\ea78
user-cir-add
\ea79
user-cir-remove
\ea7a
user-contact
\ea7b
user-directory
\e90d
user-disable
\ea7d
user-group
\1f46a
user-group-chat
\ea7f
user-group-disable
\ea80
user-groups
\1f46b
user-groups-disable
\ea82
user-lock
\ea83
user-remove
\ea84
user-search
\ea85
user-unlock
\ea86
video-card
\ea87