Text Sort Descending icon
Used in general type creation and editing scenarios. Contains locale specific variants. The Text Sort Descending icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Text Sort Descending icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { TextSortDescending24Regular, TextSortDescending24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextSortDescending24Regular aria-label="Text Sort Descending" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_sort_descending_24_regular.svg" width="24" height="24" alt="Text Sort Descending"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 2.74999C4 2.33578 4.33579 2 4.75 2H9.5C9.77345 2 10.0252 2.14882 10.1571 2.38838C10.2889 2.62794 10.2799 2.92026 10.1336 3.15127L6.11275 9.50001H9.5C9.91421 9.50001 10.25 9.83579 10.25 10.25C10.25 10.6642 9.91421 11 9.5 11H4.75C4.47656 11 4.22478 10.8512 4.09294 10.6116C3.96109 10.3721 3.97008 10.0797 4.11638 9.84872L8.13725 3.49998H4.75C4.33579 3.49998 4 3.1642 4 2.74999ZM6.36797 12.4773C6.48097 12.1877 6.76092 11.9978 7.07179 11.9999C7.38266 12.002 7.65999 12.1957 7.76903 12.4868L10.9526 20.9867C11.0978 21.3746 10.9012 21.8068 10.5133 21.9521C10.1254 22.0974 9.69313 21.9007 9.54785 21.5128L8.79389 19.4998H5.23807L4.4489 21.5224C4.29834 21.9083 3.86347 22.099 3.47759 21.9485C3.09171 21.7979 2.90094 21.363 3.0515 20.9772L6.36797 12.4773ZM8.23209 17.9998L7.05234 14.8499L5.82333 17.9998H8.23209ZM17.25 2C17.6642 2 18 2.33579 18 2.75V19.4393L20.2197 17.2197C20.5126 16.9268 20.9874 16.9268 21.2803 17.2197C21.5732 17.5126 21.5732 17.9874 21.2803 18.2803L17.7803 21.7803C17.4874 22.0732 17.0126 22.0732 16.7197 21.7803L13.2197 18.2803C12.9268 17.9874 12.9268 17.5126 13.2197 17.2197C13.5126 16.9268 13.9874 16.9268 14.2803 17.2197L16.5 19.4393V2.75C16.5 2.33579 16.8358 2 17.25 2Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/text_sort_descending_24_regular.svg";Details
| Name | Text Sort Descending |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_sort_descending_24_regular.svg |
| Filled file | ic_fluent_text_sort_descending_24_filled.svg |
| React components | TextSortDescending24Regular, TextSortDescending24Filled |
| License | MIT (© Microsoft Corporation) |