<h2>Monoline versus filled</h2>
<table>
<thead>
<tr>
<th>Icon</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Monoline</td>
<td>Monoline icons are the default style, and can be used in most cases to visually enhance meaning regarding user interaction or messaging.</td>
</tr>
<tr>
<td>Filled</td>
<td>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”.</td>
</tr>
<tr>
<td>Half-filled</td>
<td>Half-filled icons, such as star or heart icons, are intended for use with ratings.</td>
</tr>
</tbody></table>
<h2>SVG versus icon font</h2>
<table>
<thead>
<tr>
<th>Format</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>SVG</td>
<td>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 &lt; title &gt; and &lt; desc &gt; that work with screen readers and text-based browsers. They are also compatible with <a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a> specifications. Choose SVG icons if you are using a large number of multicolored icons with animations.</td>
</tr>
<tr>
<td>Icon font</td>
<td>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.</td>
</tr>
</tbody></table>
<h2>Embed SVGs or install fonts</h2>
<p>Visit <a href="https://vanilla.delldesignsystem.com/?path=/story/foundations-icons--page">Storybook</a> for instructions.</p>
<h2>Resources</h2>
<h3>Social icons</h3>
<p>Social sharing icons are not part of the Dell Design System Icon Library. Find them in Dell’s <a href="https://dam.dell.com/">Digital Asset Management (DAM)</a> library.</p>
<h3>Icon requests and contributions</h3>
<p>Need an icon not found in our library or would like to contribute to the Dell Design System icon set? Fill out our <a href="/contact/feedback/">Feedback Form</a>.</p>
<h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/classifying-icons/","type":"External"},"title":"Icon classification","description":"Read the Nielsen Norman Group&#39;s article on icons.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>

<h2>Standards</h2>
<h3>Accessibility</h3>
<p><strong>Support icons with visible text labels whenever possible</strong><br>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.<br>WCAG 2.2: <a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-content">1.1.1 Non-text Content</a></p>
<p><strong>Use icon stroke width to determine contrast ratio</strong><br>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.</p>
<table>
<thead>
<tr>
<th>Icon style</th>
<th>Contrast requirements</th>
</tr>
</thead>
<tbody><tr>
<td>Icons with stroke widths of less than 2 pixels</td>
<td>4.5:1</td>
</tr>
<tr>
<td>Filled icons or icons with stroke widths of 3 pixels and above</td>
<td>3:1</td>
</tr>
</tbody></table>
<p>WCAG 2.2: <a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast">1.4.11 Non-Text Contrast</a><br></br></p>
<p><strong>Choose icons that are universally recognizable</strong><br>As a rule, the only icons with near-universal recognition are:<br>• House, meaning home (dds2_home)<br>• Magnifying glass, meaning search (dds2_search)<br>• Printer, meaning print (dds2_print)</p>
<p>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.</p>
<h3>SEO guidelines</h3>
<p><strong>Use SVG icons whenever possible</strong><br>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.<br></br></p>
<p><strong>Describe SVG icons with tags</strong><br>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.</p>
<table>
<thead>
<tr>
<th>Icon</th>
<th>Alt text example</th>
</tr>
</thead>
<tbody><tr>
<td><img src="https://dds.dell.com/site/stage/1c/68/comment_55c6549b6f.svg" alt="Example of Comment Icon"></td>
<td>alt=“chat with a Dell Technologies Advisor - 8 a.m. to 10 p.m. CST”</td>
</tr>
<tr>
<td><img src="https://dds.dell.com/site/stage/90/cf/mail_83210d6acc.svg" alt="Example of Email Icon"></td>
<td>alt=“Email a Dell Sales Expert”</td>
</tr>
<tr>
<td><img src="https://dds.dell.com/site/stage/3a/27/phone_6a9a806e8e.svg" alt="Example of Phone Icon"></td>
<td>alt=“Call Dell Toll-free 1-877-717-3355”</td>
</tr>
</tbody></table>
<h2>Icon gallery</h2>
<p>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.</p>
<details data-name='icon-collection'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

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

Icons

React update

<p>The DDS React library now contains all components available in the Angular and Vanilla component libraries.</p>
