Text Sort Ascending icon

Use the Text Sort Ascending 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 { TextSortAscending24Regular, TextSortAscending24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextSortAscending24Regular aria-label="Text Sort Ascending" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_sort_ascending_24_regular.svg" width="24" height="24" alt="Text Sort Ascending">

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="M17.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 2ZM7.76903 2.48694C7.65999 2.19582 7.38266 2.00214 7.07179 2.00002C6.76092 1.9979 6.48097 2.18777 6.36797 2.47738L3.0515 10.9773C2.90094 11.3632 3.09171 11.798 3.47759 11.9486C3.86347 12.0991 4.29834 11.9084 4.4489 11.5225L5.23807 9.49991H8.79389L9.54785 11.5129C9.69313 11.9008 10.1254 12.0975 10.5133 11.9522C10.9012 11.807 11.0978 11.3747 10.9526 10.9868L7.76903 2.48694ZM5.82333 7.99993L7.05234 4.85005L8.23209 7.99993H5.82333ZM4.00049 13.7497C4.00049 13.3355 4.33628 12.9998 4.75049 12.9998H9.50049C9.77393 12.9998 10.0257 13.1486 10.1576 13.3881C10.2894 13.6277 10.2804 13.92 10.1341 14.151L6.11324 20.4998H9.50049C9.9147 20.4998 10.2505 20.8355 10.2505 21.2498C10.2505 21.664 9.9147 21.9997 9.50049 21.9997H4.75049C4.47704 21.9997 4.22527 21.8509 4.09343 21.6114C3.96158 21.3718 3.97057 21.0795 4.11687 20.8485L8.13773 14.4997H4.75049C4.33628 14.4997 4.00049 14.164 4.00049 13.7497Z" 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_ascending_24_regular.svg";

Details

Keywords

typetexttypographyeditcreateletter