[Question]: What is the correct usage for the following arrow icons?

[kunderwoodatadaptive]

Question for Carbon

Hi,

I'm trying to familiarize myself with the awesome icons that are included in Carbon.

Do you offer usage definitions for the following icons?

• Arrows--horizontal
• Arrows--vertical
• Caret--sort
• Chevron--sort
• Choose-item
• Drag--vertical
• Arrow--right
• Arrow—down
• Arrow—left
• Arrow--up-left
• Arrow--down-right

Thank you for your help!

Code of Conduct

• I agree to follow this project's Code of Conduct

[andreancardona]

@laurenmrice also, curious on your thoughts, on this? Thank you!!

[laurenmrice]

Hi @kunderwoodatadaptive 👋

We mostly leave it up to the designer to determine the usage of the icon and where it will be placed in a UI. However there are some common use cases where these icons show up:

Arrows--vertical

• Carbon uses this as a sorting icon to sort data table column headers along with the arrow--up and arrow--down icons.

Caret--sort

• Carbon used this icon as our default for our number input stepper. We now use the subtract and add icons as steppers instead.

Chevron--sort

• This can be used for a similar use case as listed above^.

Drag--vertical

• Use cases where this has been used is in data tables with rows that you can reposition and drag to another spot above or below inside of the table. This also has been used to drag cards up and down to reposition them on a page.

Arrow--right

• RIght arrows are usually used in buttons, links, and in tiles/cards.

Arrow--left

• Has been used as a back arrow paired with a link at the top of a page to go back to the previous page.

Arrow--up-left and Arrow--down-right

• These kinds of arrows can be used to represent data that is increasing/decreasing.

[kunderwoodatadaptive]

@laurenmrice , that's very helpful, thank you!

[kunderwoodatadaptive]

Hi, I have a few remaining icons I'd like information about:

1. Next--filled
2. Caret--right
3. Caret--down
4. Choose--item
5. Chevron--right
6. Chevron--down
7. Settings--adjust

Thank you for your help!

[laurenmrice]

@kunderwoodatadaptive

• For the first 6, I would use these icons in cases where they intuitively make sense to you. On the Carbon side, we don't have any strict guidance or use cases of when to use them.

• For the Settings--adjust icon is typically used to adjust settings for something, like a data table.