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

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.

    Directional
    arrow_forwardarrow_backarrow_downwardarrow_upward
    Subdirectories
    subdirectory_arrow_rightsubdirectory_arrow_left
  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.

    chevron_leftchevron_rightexpand_lessexpand_more