Iconography

The LUCI design system 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.

Download Icons (SVG)

Actions

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.
	Drag	To drag an item or object within the user interface.
	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 (for example, 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 (for example, select the previous row in a data grid or navigate to the previous anchor link on a web page).
	Print	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.

Storage-Specific Actions

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.

Objects

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 associate favorited items in 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).

Storage-Specific Objects

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.

Status

Icon	Name	Description and Usage
	Info	To communicate that an error that the user needs to address has occurred in the system.
	Error	To alert that something is wrong in the user interface that the user needs to fix.
	Success	To communicate 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.

File-Specific Icons

Icon	Name
	CSV
	Excel
	Image
	PDF
	Powerpoint
	Word Document
	XML

Don’t see an icon you need?

You can make a request. The LUCI team will work with you and other product teams to determine if the icon should be standardized and added to LUCI.

How To Use Icons

Download the icon sprite and reference icons using the following syntax:

Copied to clipboard

<svg class="luci-icon" aria-labelledby="title">
    <use xlink:href="/your/path/to/luci.svg#messages">
        <title>Check your messages</title>
    </use>
</svg>

How to Style Icons With Different Fill Color

If you need to style the fill color of icons, you can use the icon color tokens in your stylesheet.

Copied to clipboard

.luci-icon {
    fill: $luci-icon-color-static;
}

About IE 11 Compatibility

To use the icon sprite in IE 11 include the svg4everybody() polyfill.

Copied to clipboard

<head>
    ...
    <script src="/your/path/to/svg4everybody.min.js"></script>
    <script>svg4everybody();</script>
    ...
</head>

Other Formats

The Designers' Get Started page provides access to PNG and Sketch versions of the icons for use in design software and/or other contexts.

Do's and Don'ts

Use icons when space is limited (e.g., slim side navigation panels, mobile user interfaces, control bars).
Pair icons with a text label to further clarify intent (unless space constraints make this impossible).
Use icons to draw attention to most important actions on a page.

Do not use an icon if a text label alone sufficiently communicates the object or item.
Do not use an icon for decoration or purely to add “visual interest” on a page.

Visual Style

LUCI’s icons come from the Google Material Icon Library. All icons in the LUCI library use a similar style to maintain a consistent visual language across applications.

Size

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 smaller than 16px or larger than 48px.

Extra Small	Small	Medium	Large	Extra Large
16px	20px	24px	32px	48px

`.luci-icon--size-xs`	`.luci-icon--size-sm`	`.luci-icon--size-md`	`.luci-icon--size-lg`	`.luci-icon--size-xl`

Weight

The Google Material Icon Library, which is the source of LUCI’s icons, provides outline and filled versions of some icons. If there is a choice between filled and outline, LUCI uses the filled version.

Icons such as plus, minus, navigation arrows and check marks are built using a 2px line weight.

Endpoints and Corners

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.

Color

Interactive blue $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:

Dark blue $luci-icon-color-active when used as an active icon-only button:

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:

Accessibility

When the icon stands alone with no other context, describe the purpose of the icon in a <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>

When the icon exists in the context of another element, like a link or button, set 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>