Icon request: Sort

[rotaercz]

Icon Name: Sort

Use Case: Used for sorting an interface with rows of content

[georg94]

Similar to font-awesome at least these three classes would be really nice to have: sort, sort-asc, sort-desc

[jletey]

@locness3 @ahtohbi4 @rotaercz @georg94 How does this look? Figma

[moeenio]

Great!

[jletey]

@locness3 awesome! can i submit a PR now?

[moeenio]

I guess yes

[ahtohbi4]

@locness3 @ahtohbi4 @rotaercz @georg94 How does this look? Figma

Could I be a bore? 😁

If you look at the icons in other sets, you could see that in these icons direction of rectangles sizes has changed only and not arrows.

---

---

You can read it as:

• "sorting" + "from larger on top to smaller on the bottom" and
• "sorting" + "from smaller on top to larger on the bottom"

So, the arrow down (always down) means an action of sorting, and the set of rectangles means the direction of the sorting.

[moeenio]

I agree with @ahtohbi4

[jletey]

@ahtohbi4 @locness3 Have updated the ascending icon so that it has a down arrow:

I will update the PR once you guys give me the green light!

[moeenio]

Go ahead !

[jletey]

Awesome!

[jletey]

Updated @locness3 @ahtohbi4!

[MarcelloTheArcane]

I prefer lines rather than blocks, but I can't get them to look right...

[moeenio]

They look right!

[MarcelloTheArcane]

Okay, here's my SVGs:

sort-descending:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 5H15" stroke="inherit" stroke-width="inherit" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M12 9L18 9" stroke="inherit" stroke-width="inherit" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M12 13L21 13" stroke="inherit" stroke-width="inherit" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M4 17L7 20L10 17" stroke="inherit" stroke-width="inherit" stroke-linecap="round" stroke-linejoin="round"/>
  <line x1="7" y1="18" x2="7" y2="4" stroke="inherit" stroke-width="inherit" stroke-linecap="round"/>
</svg>

sort-ascending:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 5L21 5" stroke="inherit" stroke-width="inherit" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M12 9L18 9" stroke="inherit" stroke-width="inherit" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M12 13L15 13" stroke="inherit" stroke-width="inherit" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M4 17L7 20L10 17" stroke="inherit" stroke-width="inherit" stroke-linecap="round" stroke-linejoin="round"/>
  <line x1="7" y1="18" x2="7" y2="4" stroke="inherit" stroke-width="inherit" stroke-linecap="round"/>
</svg>

[moeenio]

Comment that on #668

[lyndsayclark]

Any updates on this one? Would love to see it go live for use on a project I'm working on.

[jletey]

@lyndsayclark Just waiting on @colebemis to merge #668!

[moeenio]

@johnletey read @MarcelloTheArcane 's comment

[denysaw]

Whatta shame. No sort icon... And 2 years of it's requests... Why did I chose this?!.. Facepalm (

[tsteenkamp]

same her...merge one of the results would be much appreciated

[realnot]

Please merge!!

[moeenio]

If only Cole would

[delCatta]

Please merge this! 1 year later and it hasn't :(

[moeenio]

Sorting icons are available at @lucide-icons.

[brennansaul]

Update on the sort icons being added?

[nextglabs]

Any news about this, please?

[DamisFloris]

Whatta shame. No sort icon... And 2 years of it's requests... Why did I chose this?!.. Facepalm (

A good solution i found to emulate a sort-like icon is rotating the already existing "bar-chart" icon.

[moeenio]

I won't mention that Feather icons fork which includes sorting icons and a lot more once again as I already did a few comments earlier.

[analog-guy]

what a joke