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.
Icon | Name | Description and Usage |
---|---|---|
Add |
To add a new item or object into the user interface (eg, add a system to monitor, add a contact, etc.). |
|
Chat |
To reveal availability of interactive chat or to convey a conversation with a support representative. |
|
Close |
To close a window (modal/dialogue) within a user interface. |
|
Collapse |
To collapse a portion of a user interface; most often paired with the expand icon. |
|
Configure |
To change the configuration of a system or how a product user interface is displayed. |
|
Delete |
To remove an item or object from the user interface (e.g., delete file). |
|
Download |
To download an asset from the user interface when format is not relevant or available. For specific file type downloads, consider using the file specific icons. |
|
Edit |
To edit items or objects within an interface. |
|
Expand |
To expand a portion of the interface; most often paired with the collapse icon. |
|
Filter |
To filter a list based on more specific data needs and other user criteria. |
|
More (horizontal) |
To communicate more actions or options associated with an item or object. |
|
More (vertical) |
To communicate more actions or options associated with an item or object. |
|
Navigate - back |
To navigate back a screen within a user interface. |
|
Navigate - down |
To navigate to the next item on the screen. (e.g. select the next row in a data grid or navigate to the next anchor link on a web page.) |
|
Navigate - forward |
To navigate forward within a user interface. Use when there’s a need to emphasize and promote navigation. |
|
Navigate - up |
To navigate to the previous item on the screen. (e.g. select the previous row in a data grid or navigate to the previous anchor link on a web page.) |
|
|
To print data, lists, pages, and other interface content. |
|
Save |
To save changes within an interface. |
|
Search |
To convey the ability to search within an interface. |
|
Send |
To convey the ability to share / send information to other people. |
|
Remove |
To remove items in an interface after they have manually added it; most often paired with add icon. |
Icon | Name | Description and Usage |
---|---|---|
Backup |
To convey action or ability to back-up data sources. |
|
Clone |
For cloning actions within storage specific interfaces. |
|
Mirror |
For Mirroring actions within storage specific interfaces. |
|
Monitor |
To convey monitoring actions within storage specific interfaces. |
|
Protect |
To convey protecting data. |
|
Restore |
To convey restoring data. |
Icon | Name | Description and Usage |
---|---|---|
Dashboard |
To navigate to/from a dashboard within a user interface or to convey the availability of a dashboard. |
|
Favorite |
To reveal or associating favorited items within a user interface. |
|
Help |
To reveal where or how to get help within a user interface. |
|
Info |
To reveal or communicate that there is more information available for an item within the user interface. |
|
Manage |
To manage preferences, settings, or other controls within the user interface. |
|
Menu |
To communicate a menu, often of navigational options associated with the product or web site. |
|
Messages |
To communicate that messages can be sent or received within a user interface. |
|
Reports |
To reveal where reports are available in a user interface. |
|
Settings |
To update and manage ancillary settings within a user interface. |
|
User Profile |
To reveal that a user is logged into a user interface (or can log-in to a user interface). |
Icon | Name | Description and Usage |
---|---|---|
Flash |
To convey flash capabilities or product features. |
|
Health |
To reveal where or how to monitor system health. |
|
Performance |
To reveal where or how to monitor system performance. |
Icon | Name | Description and Usage |
---|---|---|
Error |
To alert that something is wrong in the user interface that the user needs to fix. |
|
Success |
To communicate a successful completion of an important task within a user interface. |
|
Warning |
To communicate potential adverse effects associated with an action or status within the user interface. |
|
Violation |
To communicate a severe problem that needs to be addressed. |
Icon | Name | Description and Usage |
---|---|---|
CSV |
||
Excel |
||
Image |
||
|
||
Powerpoint |
||
Word Document |
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.
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.
LUCI’s icons use Google’s shared icon library “Material”. All icons in the LUCI library use a similar style to maintain a consistent visual language across applications.
LUCI uses a minimal design style that helps icons work in a variety of sizes while still maintaining legibility.
By default, icons should be 20px. Icons should not be used smaller than 16px or larger than 48px.
Extra Small | Small | Medium | Large | Extra Large |
---|---|---|---|---|
16px |
20px |
24px |
32px |
48px |
|
|
|
|
|
LUCI’s icons are based off of the Google Material icon library, which provides outline and filled versions of some of the icons. If there is a choice between filled and outline, LUCI uses the filled version.
Icons such as plus, minus, navigation arrows,check marks, etc. are built using a 2px line weight.
LUCI’s icons use a mix of rounded and straight end points and corners. Rounded corners are typically created with a 3px rounded radius.
Icons that contain symbols such as question marks (help/tooltips) and checkmarks (success) are always enclosed within a circle.
Purple $luci-icon-color-default
if interactive / links:
White $luci-icon-color-on-interactive
when used as Button with icon only or on a Primary Button:
Interactive blue $luci-interactive-color-default
when used as a Button with text and icon, or in a Button group:
Gray $luci-icon-color-disabled
when used on a disabled Button:
Dark gray $luci-icon-color-static
if not used as a link:
Red $luci-icon-color-error
, green $luci-icon-color-success
, or orange $luci-icon-color-warning
to convey error, success, or warning for status icons:
<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>