Arrow Sort Down Lines icon

Use the Arrow Sort Down Lines 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 { ArrowSortDownLines24Regular, ArrowSortDownLines24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowSortDownLines24Regular aria-label="Arrow Sort Down Lines" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_sort_down_lines_24_regular.svg" width="24" height="24" alt="Arrow Sort Down Lines">

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="M18 2.75C18 2.33579 17.6642 2 17.25 2C16.8358 2 16.5 2.33579 16.5 2.75V19.4393L14.2803 17.2197C13.9874 16.9268 13.5126 16.9268 13.2197 17.2197C12.9268 17.5126 12.9268 17.9874 13.2197 18.2803L16.7197 21.7803C17.0126 22.0732 17.4874 22.0732 17.7803 21.7803L21.2803 18.2803C21.5732 17.9874 21.5732 17.5126 21.2803 17.2197C20.9874 16.9268 20.5126 16.9268 20.2197 17.2197L18 19.4393V2.75ZM2.75 4.5C2.33579 4.5 2 4.83579 2 5.25C2 5.66421 2.33579 6 2.75 6H13.25C13.6642 6 14 5.66421 14 5.25C14 4.83579 13.6642 4.5 13.25 4.5H2.75ZM6 9.25C6 8.83579 6.33579 8.5 6.75 8.5H13.25C13.6642 8.5 14 8.83579 14 9.25C14 9.66421 13.6642 10 13.25 10H6.75C6.33579 10 6 9.66421 6 9.25ZM10.75 12.5C10.3358 12.5 10 12.8358 10 13.25C10 13.6642 10.3358 14 10.75 14H13.25C13.6642 14 14 13.6642 14 13.25C14 12.8358 13.6642 12.5 13.25 12.5H10.75Z" 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/arrow_sort_down_lines_24_regular.svg";

Details

Keywords

arrowdirectiontext