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: https://uicore.dellcdn.com/1.6.1/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.6.1/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.6.1/css/dds-fonts.css');