Skip to main content

Icons and Symbols

Astro includes a library of common Icons, Symbols, and Notification Symbols. Persistent use of these will help ensure users are presented with consistent and meaningful information across applications.

Interactive Example

Each icon, symbol, or notification symbol must be easily identifiable by users and also be immediately distinguishable from each other, eliminating confusion and mistakes.

Astro’s icons have been designed to utilize the Astro Status System.

Monitoring Icons must include a label, and a status indicator. When used in a light theme status indicators must also include a border around the status indicator as assigned in Astro’s Component Design Tokens.

Astro Icon Classes

Monitoring Icons

These icons represent objects, equipment, and concepts that are being administered or monitored. The purpose of these icons is to easily, concisely, and clearly visually communicate their status to users.

Example of the same Monitoring Icon in all possible states
Example of the same monitoring icon in all possible states
Example of different Monitoring Icon symbols
Example of different monitoring icon symbols

Labeling

An Icon may also include a Label and Sub-Label.

Anatomy of Icon Label and Sub-Label.
Anatomy of Icon Label and Sub-Label.

An Icon Label provides the name of the item being represented. An Icon Label should not change.

An Icon Sub-Label provides additional information to the user and may be dynamic. Use Sub-Labels only as needed to avoid unnecessary distraction.

Percentage Monitoring Icons

Percentage Monitoring Icons depict a value between 0 and 100 as an arc and a numeric display. Ranges within the arc may be mapped to the standard Astro Status Colors. In this example the range containing 80% is mapped to Serious.

Anatomy of the Percentage Monitoring Icon
Anatomy of the Percentage Monitoring Icon

Notification Symbols

Events that require some user attention, but no immediate response, may be indicated by changes to a Notification Symbol.

This Notification Symbol shows that ninety-nine events related to a Satellite have occurred. You may hyperlink indicators to reveal a deeper view of relevant Notification information. You may also link to the general Log.

Anatomy of the Notification Symbol.
Anatomy of the Notification Symbol.

Examples
Do: When used in a group, keep Icons and Symbols equally sized.
Do: When used in a group, keep Icons and Symbols equally sized.
Do: Allow ample space between Icons and Symbols.
Do: Allow ample space between Icons and Symbols.
Do: In a horizontal layout, align horizontally based on the center of each Icon when height and width may vary.
Do: In a horizontal layout, align horizontally based on the center of each Icon when height and width may vary.
Do: Use Icons and Symbols consistently across applications.
Do: Use Icons and Symbols consistently across applications.
Do: Use standard Health and Status indication colors and Symbols.
Do: Use standard Health and Status indication colors and Symbols.
Do: In a vertical layout, align vertically based on the center of each Icon when height and width vary.
Do: In a vertical layout, align vertically based on the center of each Icon when height and width vary.

Asset Status
Asset Version Status
Documentation N/A Available
UI Kit - Dark v7 Available
UI Kit - Light v7 Available
UI Kit - Wireframe v7 Available
Web Component v7 Available
Component Tokens N/A Planned
Status Key
Available In Progress Planned Not Available Deprecated
Feedback

Help us improve Astro

Please rate your present experience with Astro:

Cancel

Request Access to Source Code Repository

The source code Git repository and other useful documentation for Astro’s apps are hosted on Github.com. Please fill out the form below to request access.

How Would You Like to Use Astro’s Source Code?
Which Astro App’s Source Code Would You Like Access to?
Successfully submitted request for source code