Icons

Below is a reference to the icons available within the icon font included in the design system CSS. You can also download a zip file that contains an SVG file of each icon and/or the TTF icon font file. Please refer to the Dell Technologies brand website, https://brand.delltechnologies.com/icon/, for further information and requirements for iconography.

Getting started with icons in code

SVGs

External SVG

Not yet supported. Will likely require JavaScript.

Embedded SVG

Embed (copy/paste) the SVG definitions in your page immediately after the <body> tag. You can see them by viewing the source here: </body>https://uicore.dellcdn.com/1.3.3/icons/dds-icons-defs.svg

Basic Use

To use an SVG in your page include the unique class name and href (see below for a list of icons with class names):

<svg class="dds__svg-icons" aria-hidden="true"><use xlink:href="#dds__hinge"/></svg>

Loading Icon

See the Progress Indicators page for information about the Loading Indicator.

Icon Font

Standard

To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document.</head>

<link rel="stylesheet" href="https://uicore.dellcdn.com/1.3.3/css/dds-fonts.css">

@import

In the head of your page or in your CSS file, you can use the at-rule @import to load the icon font.

<style></style>

@import url('https://uicore.dellcdn.com/1.3.3/css/dds-fonts.css');