The LUCI Design Systems icons are based on the Google Material Icon Library. The library includes SVG icons for only those icons that have been vetted for use across NetApp web sites and digital products.
Utility icons enhance meaning in web sites and digital products by visually communicating actions, status, and feedback.
The LUCI Design System provides the following SVG icons:
You can make a request and the LUCI team will work with you and other product teams to determine if the icon should be standardized and added to LUCI.
The default size is 20px × 20px, however, icons can be scaled smaller and larger based upon your need. There are 5 different sizes available for use as follows:
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
|
16px |
20px |
24px |
32px |
48px |
|
|
|
|
|
|
Download the icon sprite and reference icons using the following syntax:
<svg class="luci-icon" aria-labelledby="title">
<use xlink:href="/your/path/to/luci.svg#messages">
<title>Check your messages</title>
</use>
</svg>To use the icon sprite in IE 11 include the svg4everybody() polyfill.
<head>
...
<script src="/your/path/to/svg4everybody.min.js"></script>
<script>svg4everybody();</script>
...
</head>The Get Started page provides access to PNG and Sketch versions of the icons for use in design software and/or other contexts.
<title> tag within the <svg> element. Include an aria-labelledby="title" attribute on the <svg> element.<svg class="luci-icon" aria-labelledby="title">
<use xlink:href="/your/path/to/luci.svg#messages">
<title>Check your messages</title>
</use>
</svg>aria-hidden="true" to prevent screenreaders from reading the SVG.<a href="#">
<svg class="luci-icon" aria-hidden="true">
<use xlink:href="/your/path/to/luci.svg#messages"> </use>
</svg> Check your messages </a>