linkwMost commonly used icons
Icon
EOS icon ligature:
personcheck_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.
The following is a list of icons that are commonly used in SUSE applications along with the guidelines to use them consistently in all of our products.
Use this icon to represent a person/user in a table/list of users.
Use this icon for user account or a group 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 person/user or group of users.
Use this icon to represent a group of users/persons.
Use this icon to represent and organization, admin user.
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 individual groups of users, group of systems, etc.
Use this icon to represent a system, a physical machine, a virtual machine, or a cloud instance.
Use this icon for configuration of any: system, virtual machine, cloud instance, etc.
Use this icon for downloads, of any type.
Use this icon to represent a downloaded item.
Use this icon to indicate the action to upload files.
Use this icon to represent uploaded icons.
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 for general file uploads.
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 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.
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 to highlight information that is not an error and does not require an action from the customer.
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 highlight information that is not a warning and does not require an action from the customer.
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.
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 to represent successful results: successful updates, removals, etc. or an applied/active status.
Use this icon in buttons, modals or links to close a modal, message, notification, or cancel/dismiss an action.
Use this icon to represent canceled/interrupted results or status: an update that was canceled, a rejected request, etc. or a disabled/inactive status.
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 buttons, modals or links to close a modal, message, notification, or cancel/dismiss an action.
Use this icon to upload files or save information.
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.
remove_circle
.Use this icon to represent status unavailable, disabled, or for actions to disable or block.
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.
Use this icon to make sensible data visible, e.g. a password.
Use this icon in results/responses, e.g.: the icon next to a title such as: Showing all results.
Use this icon to hide sensible data, e.g. a password.
Use this icon in results/responses, e.g.: the icon next to a title such as a list of hidden systems.
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 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.
Use this icon for a contextual menu with a list of options to display in a dropdown or popover.
Use this icon for specific dropdown triggers, such as a notifications menu, account menu.
Use this icon to reveal hidden information, e.g. show all hidden items in a long horizontal menu.
visibility
for this purpose instead.Use this icon when offering a user a way to contact support in Chat or Ticketing form.
Use this icon for other general contact information, such as email, social media, etc.
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 as a status response when performing a search.
Use this icon in links or buttons linking to external links which will open in a new tab/window.
Use this icon in normal links.
Use this icon when there areno resultsto show, e.g.: there are no Subscriptions to show in the Subscription page.
Use this icon to show groups of items. Instead use folder folder
Use this icon to represent logs or history of information/data.
Use this icon to trigger a refresh of 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 for history of data such as activity logs.
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 inside input fields or in a submit button that confirms the editing of a form.
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 anything related to security.
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 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 links/buttons to forums, or chat rooms where the user will be in touch with other users and be able to initiate conversations.
Use this icon in real time applications when a user is typing a message.
-
Use this icon in links/buttons that:
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 an email.
Use this icon to reply to emails, chat or comments.
Use this icon to forward/upload data.
Use this icon in normal alerts prompted after a certain action, e.g.: successfully added a system.
Use this icon in normal alerts prompted after a certain action, e.g.: successfully added a system.
Share your rebranded product to inspire other SUSE developers.
Tell us your name and your products' so that we can get in touch with you:
Thank you for for sharing your product success story with us.
Thank you for helping us improve EOS.