Icons

Icons represent items and ideas in a simple graphic format. They help communicate with universal understanding.


Status

PublishedElement can be used in production
Documentation
In progressElement design and development in progress
PublishedElement can be used in production

Monoline versus filled

IconUse case
MonolineMonoline icons are the default style, and can be used in most cases to visually enhance meaning regarding user interaction or messaging.
FilledFilled 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-filledHalf-filled icons, such as star or heart icons, are intended for use with ratings.

SVG versus icon font

The Dell Design System offers two formats for icons: icon fonts and SVGs. Choose the one that best suits your purpose.

FormatUse case
SVGSVGs 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 fontIcon 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 fonts

Visit Storybook for instructions.

Resources

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.

Articles

Icon classification

Read the Nielsen Norman Group's article on icons.

Standards

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 styleContrast requirements
Icons with stroke widths of less than 2 pixels4.5:1
Filled icons or icons with stroke widths of 3 pixels and above3: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 tag can also be added to an SVG.

IconAlt text example
Example of Comment Iconalt=“chat with a Dell Technologies Advisor - 8 a.m. to 10 p.m. CST”
Example of Email Iconalt=“Email a Dell Sales Expert”
Example of Phone Iconalt=“Call Dell Toll-free 1-877-717-3355”

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

DeprecatedDeprecated

brand-dellemc

\e935

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

mail

\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