Skip to main content

Functional icons

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.

Asset explanation Asset explanation

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

Asset explanation Asset explanation

Note

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

Universally known iconsSemi-universally known iconsNot universally known icons
Univerally known icons Univerally known iconsSemi-univerally known icons Semi-univerally known iconsNot univerally known icons Not univerally known icons

Position

Prefix slot

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

Asset explanation Asset explanation

Suffix slot

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

Asset explanation Asset explanation

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

Asset explanation Asset explanation

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.

Asset explanation Asset explanation

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.

App as a functional icon App as a functional icon

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

IconExplanation
Filled icons Filled iconsOutlined icons: These can be used everywhere in the interface except the world map.
Filled icons Filled iconsFilled icons: These should only be used on the world map.
Subscript icons Subscript iconsSubscripted 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

IconExplanation
Filled icons Filled iconsArrows: Are used for linking to other pages within the product, and show direction or trends.
Filled icons Filled iconsChevrons: 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.
Filled icons Filled iconsOptions: Configurations that only influence a selected area and preferences.
Filled icons Filled iconsSettings: Platform-wide configurations, often used to change defaults.
Filled icons Filled iconsExternal link: Open an app or page not part of the Dynatrace product.
Filled icons Filled iconsLink: Mark a link.
Filled icons Filled iconsOpen with: Open an app within the Dynatrace product.
Filled icons Filled iconsShare: Share with other people, apps, and more detailed share options.
Filled icons Filled iconsGroup: Share with other people.
  • Learn more about indicators and which icons to use in the Status and health documentation.
Still have questions?
Find answers in the Dynatrace Community