Hi all,

As you know, our current arrow icons (Previous, Next, Expand and Collapse) are too big and they take too much importance in the designs (specially when accompanying texts).

Here you can view how they are and how they work with texts:

• Our current arrows are too big when we use them as controls (next-previous, expand-collapse)
• They have different type of padding (1px, 2px or 4px)
• We have arrows duplicated because we have them in big (Expand) and small (Dropdown) sizes

Solutions:

• Update icon padding with 4px in all icons.
• Unify duplicated arrow icons (Expand-Collapse and Dropdown-DropdownUp)

cc: @Sarai-WMDE @Volker_E

HI @bmartinezcalvo are you thinking about optimizing towards 16px font-size?
How would we deal with other use cases besides normal text:

In the case of dropdowns the reduced size made a lot of sense, pointing towards another icon size token, that is limited to very few icons in our system:

Use case of pagers:

In T303923#7782914, @Volker_E wrote:

HI @bmartinezcalvo are you thinking about optimizing towards 16px font-size?
How would we deal with other use cases besides normal text:

@Volker_E thank you for showing me these use cases. After reviewing them I have come to the conclusion that maybe we need 2 sizes of arrow icons:

1. Big (the ones that we currently have)
2. Small (new size variant with the same size of the Dropdown and DropdownUp icons)

We could use Big or Small variant according to the need of each use case. It's clear that for some cases the big arrow is perfect and for other cases the big arrow is too much.

With this solution we would only have to do the following:

• Add Small variant to all arrow icons (Previous, Next, Expand and Collapse) and add them in both Figma and code (OOUI and Codex)
• Have both variants (Big and Small) available and use them when we need it