Iconography

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.

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.

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.)

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 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).

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

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.

Files

Icon Name Description and Usage

CSV

Excel

Image

PDF

Powerpoint

Word Document

Don’t see an icon you need?

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.

How To Use

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>

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>

Need another format?

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

When to Use

Do’s

  • Use icons when space is limited (eg, 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.

Don’ts

  • Don’t use an icon if text label alone sufficiently communicates the object or item.
  • Use for decoration or purely to add “visual interest” on a page.

Visual Style

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.

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 used 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

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.

Do’s

Don’ts

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

LUCI Icon Weight Image

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.

LUCI Icon Points and Corners Image

Icons that contain symbols such as question marks (help/tooltips) and checkmarks (success) are always enclosed within a circle.

LUCI Icon Help Image LUCI Icon Success Image

Color

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:

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>