Most commonly used icons

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

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

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

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.

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

Use this icon for downloads, of any type.

Use this icon to indicate the action to upload files.

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.

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.

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.

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.

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

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.

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

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.

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

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

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.

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

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

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

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.

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

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

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

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.

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

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

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

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"

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.

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

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.

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

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

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.

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

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

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