Functional icon guidelines

Note

Check out our functional icon library for more information and an icon overview.

You use icons to add visual weight to elements with a high priority or to explain universal knowledge simply. They help the user identify separate areas in your interface and are there to draw attention to key areas of functionality.

Do

Use icons to draw attention to or differentiate elements of your interface.

1. Interface with icons that add visual weight to an area and its elements and help users identify actions quickly.
2. Interface without icons makes it harder to identify key areas.

Overusage

Do

Use icons with intention, especially in crowded interfaces.

Don't

Don't use icons too often, and only to add visual interest. It can make your design lose clarity and confuse users.

Labels

Use vertical- and center-align when placing an icon next to a label.

Do

Combine an icon with a label to help users understand its meaning more clearly.

Don't

Avoid tooltips as a substitute for labels. This is especially true for icons that are abstract, unfamiliar to the user, or complex actions.

Sometimes it may be better to use an icon alone. You can do this when when:

1. Space is very limited (too small for text alone).
2. The icons are standardized and universally known.
3. The icons represent objects with strong physical analogs or visual attributes (for example, a red rectangle to set the page's background as red).

Note

Icons without labels must have a proper aria-label so their functionality is still accessible to people using screen readers.

Universally known icons	Semi-universally known icons	Not universally known icons

Position

Prefix slot

Place an icon in front of the label if it's directly related and clarifies it.

Suffix slot

Place an icon after the label if it gives extra information or hints at a functionality.

Consistency and convention

Do

Before you use an icon, check its detail view, including a description and tags, to see if your use case matches.

Don't

Don't use an icon for multiple and unconnected purposes. It will blur its meaning and confuse the user.

Detail view

Outlined and filled

Outlined icons have a light, clean style that works well in dense UIs. However, putting outlined icons on busy backgrounds would make them unrecognizable.

Filled icons were designed for data visualizations, such as the world map in the example below, and these icons should be reserved for use in data visualizations.

Some filled icons help you visualize different states, like the Favorite icon, which represents a different state depending on whether it's outlined or filled.

Size

The icons work best in the following three sizes, and with DT Flow, our custom typeface is optimized for data-heavy environments. Use icons in their initially intended size.

• Small (16px) - for 12px DT Flow
• Default (20px) - for 14px DT Flow
• Large (32px) - for decorative reasons

App as a functional icon

Use the functional icon when you're already in the context and hierarchy of functional icons.

Use the app icon if you directly reference the app itself, what it does, and if the icon is a direct indicator for it.

Test and refine

Don't assume using icons will fix any UX problems you're having. Always test and refine your work.

Special use-cases

Categories

Icon	Explanation
	Outlined icons: These can be used everywhere in the interface except the world map.
	Filled icons: These should only be used on the world map.
	Subscripted icons: Icons that start at the bottom of the grid. They're only needed for the world map since some icons must point to specific spots.

General

Icon	Explanation
	Arrows: Are used for linking to other pages within the product, and show direction or trends.
	Chevrons: Indicates expandable and collapsable components such as a list or dropdown. Indicates the ability to navigate to the next or previous step, view overflow items, or expand a tree.
	Options: Configurations that only influence a selected area and preferences.
	Settings: Platform-wide configurations, often used to change defaults.
	External link: Open an app or page not part of the Dynatrace product.
	Link: Mark a link.
	Open with: Open an app within the Dynatrace product.
	Share: Share with other people, apps, and more detailed share options.
	Group: Share with other people.

Important links

• Learn more about indicators and which icons to use in the Status and health documentation.