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

Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.
EOS Design System logotype

Arrow icons usage

Arrows are widely used to point or indicate direction or to represent progress of order. Using correct icon consistently across all SUSE products requires a well-defined set of rules.

Using arrows

Arrow usage in applications can be broken down into two main use cases:

  1. To show direction ("to the right", "above", "below", etc)

    This type of arrow indicates a path and a direction upon that path. Used in a button it shows the literal direction of an action (“move item to the right”). When used in a non-linear hierarchy, such as a file system context, this type of arrow with a bend in the path, is used to indicate a subordinate item, in this case, a subdirectory.

  2. To represent progress of order ("start", "forward/back", or "next/previous")

    These types of arrows indicate movement between states in a linear process or hierarchy. Examples of usage are “initiate a system process”, “move to the next/previous step” “expand/collapse”, or breadcrumb/page hierarchy.