The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

Using Material Design icons consistently

Material Design icons provide a large set of icons. Finding the correct icon and using it consistently across all SUSE products requires a well-defined set of rules.


Most commonly used MD icons

Icon

person

Material Design ligature:
person
check_circleDo

Use this icon to represent a person/user in a table/list of users.

cancelDon't

Use this icon for user account or a group of users.


Icon

account_circle

Material Design ligature:
account_circle
check_circleDo

Use this icon in links to user account, when a user will view or edit user account details, or next to the user name.

cancelDon't

Use this icon to represent a person/user or group of users.


Icon

group

Material Design ligature:
group
check_circleDo

Use this icon to represent a group of users/persons.

cancelDon't

Use this icon to represent and organization, admin user.


Icon

domain

Material Design ligature:
domain
check_circleDo

Use this icon to represent organizations, e.g.: SUSE Germany, SUSE UK, SUSE China, etc. An organization contains group/s of users, subscriptions, systems, organization details, etc. as a whole entity.

cancelDon't

Use this icon to represent individual groups of users, group of systems, etc.


Icon

desktop_windows

Material Design ligature:
desktop_windows
check_circleDo

Use this icon to represent a system, a physical machine, a virtual machine, or a cloud instance.

cancelDon't

Use this icon for configuration of any: system, virtual machine, cloud instance, etc.


Icon

file_download

Material Design ligature:
file_download
check_circleDo

Use this icon for downloads, of any type.

cancelDon't

Use this icon to represent a downloaded item.


Icon

file_upload

Material Design ligature:
file_upload
check_circleDo

Use this icon to indicate the action to upload files.

cancelDon't

Use this icon to represent uploaded icons.


Icon

attach_file

Material Design ligature:
attach_file
check_circleDo

Use this icon to represent attachments, whether present in a chat channel, support thread, and others, or as action to add an attachment to a message.

cancelDon't

Use this icon for general file uploads.


Icon

info

Material Design ligature:
info
check_circleDo

Use this icon in alerts, notifications, buttons with tooltip/popover information, or other types of prompted messages, to show the user the text displayed (or to be displayed if the information lays behind a tooltip/popover) is only informational and no immediate action is required.

cancelDon't

Use this icon for general text in the UI or documentation. Don't use it when an action is required from the user, in which case a state of warning/error should be assigned, with corresponding icons.


Icon

error

Material Design ligature:
error
check_circleDo

Use this icon in alerts, notifications, buttons with tooltip/popover information, or other types of prompted messages, to inform the user an error has occured and an action is required, even if the action is to wait and retry.

cancelDon't

Use this icon to highlight information that is not an error and does not require an action from the customer.


Icon

warning

Material Design ligature:
warning
check_circleDo

Use this icon in alerts, notifications, buttons with tooltip/popover information, or other types of prompted messages, to warn the user and inform them an action is required, even if the action is to wait and retry.

cancelDon't

Use this icon to highlight information that is not a warning and does not require an action from the customer.


Icon

check_circle

Material Design ligature:
check_circle
check_circleDo

Use this icon to represent successful results: successful updates, removals, etc. or an applied/active status.

cancelDon't

Use this icon in call-to-actions buttons or links.


Icon

check

Material Design ligature:
check
check_circleDo

Use this icon in call-to-actions buttons or links next to the text of the action that will occur. If the icon is used without text in the actionable button/link, make sure to use a tooltip that explains the positive action on mouse over.

cancelDon't

Use this icon to represent successful results: successful updates, removals, etc. or an applied/active status.


Icon

close

Material Design ligature:
close
check_circleDo

Use this icon in buttons, modals or links to close a modal, message, notification, or cancel/dismiss an action.

cancelDon't

Use this icon to represent canceled/interrupted results or status: an update that was canceled, a rejected request, etc. or a disabled/inactive status.


Icon

cancel

Material Design ligature:
cancel
check_circleDo

Use this icon in a response to represent canceled/interrupted results: an update that was canceled, a rejected request, etc. or a disabled/inactive status.

cancelDon't

Use this icon in buttons, modals or links to close a modal, message, notification, or cancel/dismiss an action.


Icon

remove_circle

Material Design ligature:
remove_circle
check_circleDo

  • Use this icon in an action to remove an item from a list or table.
  • You may also use this icon to visualize items removed, for example when showing a list of systems removed.

cancelDon't
  • Use this icon to delete information permanently or any other destructive action.

Icon

add_circle

Material Design ligature:
add_circle
check_circleDo

  • Use this icon in an action to add an item to a list, table, or other components.
  • You may also use this icon to represent a successfully added item.

cancelDon't

Use this icon to upload files or save information.


Icon

delete

Material Design ligature:
delete
check_circleDo

Use this icon in an action to delete an item/information from the system (from the DB), or as the result of it, e.g.: "[delete] message deleted".

Dependency: When permanently deleting an item or performing any other destructive action, a confirmation modal/popup should always be used. For this icon you must always use a `btn-danger` as the confirmation of the removal. See pattern - common actions to learn more.

cancelDon't
  • Use this icon to remove items from a list/table, that will be lost from the database, e.g.: when removing a user from a group which doesn't delete them from a database, vs., deleting a user account removes them from the database. For removals please use the icon remove_circle.

Icon

block

Material Design ligature:
block
check_circleDo

Use this icon to represent status unavailable, disabled, or for actions to disable or block.

cancelDon't

Use this icon stacked with other icons to represent removals or the action of disabling an item, e.g.: the block icon stacked with a desktop_windows under to represent the removal/disbling of a system.


Icon

visibility

Material Design ligature:
visibility
check_circleDo

Use this icon to make sensible data visible, e.g. a password.

cancelDon't

Use this icon in results/responses, e.g.: the icon next to a title such as: Showing all results.


Icon

visibility_off

Material Design ligature:
visibility_off
check_circleDo

Use this icon to hide sensible data, e.g. a password.

cancelDon't

Use this icon in results/responses, e.g.: the icon next to a title such as a list of hidden systems.


Icon

sync

Material Design ligature:
sync
check_circleDo

Use this icon in actionable items that will trigger a refresh, reload, sync of data, etc. in which the results will be shown in the UI without a page refresh. Use this icon together with the "spin" class to animate the spinning when the data is being retrieved.

cancelDon't

Use this icon on actions that will trigger an update server side that will not return results to the front-end directly but rather require a page refresh.


Icon

more_vert

Material Design ligature:
more_vert
check_circleDo

Use this icon for a contextual menu with a list of options to display in a dropdown or popover.

cancelDon't

Use this icon for specific dropdown triggers, such as a notifications menu, account menu.


Icon

more_horiz

Material Design ligature:
more_horiz
check_circleDo

Use this icon to reveal hidden information, e.g. show all hidden items in a long horizontal menu.

cancelDon't
  • Use this icon in links/buttons that will take the user to a different page/section to view more information. Use visibility for this purpose instead.

Icon

headset_mic

Material Design ligature:
headset_mic
check_circleDo

Use this icon when offering a user a way to contact support in Chat or Ticketing form.

cancelDon't

Use this icon for other general contact information, such as email, social media, etc.


Icon

search

Material Design ligature:
search
check_circleDo

Use this icon within a search input at the far right, for buttons which open up/display a search input, or submit buttons in the search input that will send the search form.

cancelDon't

Use this icon as a status response when performing a search.


Icon

launch

Material Design ligature:
launch
check_circleDo

Use this icon in links or buttons linking to external links which will open in a new tab/window.

cancelDon't

Use this icon in normal links.


Icon

folder_open

Material Design ligature:
folder_open
check_circleDo

Use this icon when there areno resultsto show, e.g.: there are no Subscriptions to show in the Subscription page.

cancelDon't

Use this icon to show groups of items. Instead use folder folder


Icon

history

Material Design ligature:
history
check_circleDo

Use this icon to represent logs or history of information/data.

cancelDon't

Use this icon to trigger a refresh of history of information/data.


Icon

assessment

Material Design ligature:
assessment
check_circleDo

Use this icon to represent statistics or charts, or in buttons/links that will generate one, always with the text explaining the action, e.g.: "[icon] create chart"

cancelDon't

Use this icon for history of data such as activity logs.


Icon

edit

Material Design ligature:
edit
check_circleDo

Use this icon in buttons/links next to the text "edit (...)" in order to be specific about what is to be edited. Also, you may use the standalone icon in modular components or table rows to edit the content displayed in these, always with a tooltip explaining the information that will be edited.

cancelDon't

Use this icon inside input fields or in a submit button that confirms the editing of a form.


Icon

verified_user

Material Design ligature:
verified_user
check_circleDo

Use this icon for verification, status of verified users/accounts/systems/etc, or to activate systems/accounts/subscriptions in buttons/links.

cancelDon't

Use this icon for anything related to security.


Icon

forum

Material Design ligature:
forum
check_circleDo

Use this icon for forums, or chat rooms where the user will be in touch with more than 1 user and be able to initiate conversations.

cancelDon't

Use this icon for unidirectional communication tools such as feedback, or 1:1 communication tools such as support chat, where the user will only send a unique message, or have a conversation with only 1 person (in the case of support chat).


Icon

chat

Material Design ligature:
chat
check_circleDo

Use this icon for unidirectional communication tools such as feedback, or 1:1 communication tools such as support chat, where the user will only send a unique message, or have a conversation with only 1 person (in the case of support chat).

cancelDon't

Use this icon in links/buttons to forums, or chat rooms where the user will be in touch with other users and be able to initiate conversations.


Icon

textsms

Material Design ligature:
textsms
check_circleDo

Use this icon in real time applications when a user is typing a message.

cancelDon't

-


Icon

email

Material Design ligature:
email
check_circleDo

Use this icon in links/buttons that:

  • will take the user to a contact page where the user will send an email through a form.
  • will open the user's email cient (to send an email).

Use this icon next to a title or in a section to represent the section shows a list of emails received or in a form that will send an email.

Use this icon for mail addresses.

cancelDon't

Use this icon to reply an email.


Icon

reply

Material Design ligature:
reply
check_circleDo

Use this icon to reply to emails, chat or comments.

cancelDon't

Use this icon to forward/upload data.


Icon

notifications

Material Design ligature:
notifications
check_circleDo
  • Use this icon in a list of notifications.
  • Use this icon to represent when new notifications are available.
  • Use this icon in the action to re-activate notifications for an item/account.
cancelDon't

Use this icon in normal alerts prompted after a certain action, e.g.: successfully added a system.


Icon

notifications_off

Material Design ligature:
notifications_off
check_circleDo
  • Use this icon to represent that notifications have been turned off for the item/account.
  • In the action to disable notifications for an item/account.
cancelDon't

Use this icon in normal alerts prompted after a certain action, e.g.: successfully added a system.