Chevron Up Down icon

Use the Chevron Up Down 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 { ChevronUpDown24Regular, ChevronUpDown24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ChevronUpDown24Regular aria-label="Chevron Up Down" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_chevron_up_down_24_regular.svg" width="24" height="24" alt="Chevron Up Down">

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="M12.5406 2.23017C12.3992 2.08311 12.204 2 12 2C11.796 2 11.6008 2.08311 11.4594 2.23017L5.20938 8.73017C4.92228 9.02875 4.93159 9.50353 5.23017 9.79062C5.52875 10.0777 6.00353 10.0684 6.29063 9.76983L12 3.83208L17.7094 9.76983C17.9965 10.0684 18.4713 10.0777 18.7698 9.79062C19.0684 9.50353 19.0777 9.02875 18.7906 8.73017L12.5406 2.23017ZM12.5406 21.7698C12.3992 21.9169 12.204 22 12 22C11.796 22 11.6008 21.9169 11.4594 21.7698L5.20938 15.2698C4.92228 14.9713 4.93159 14.4965 5.23017 14.2094C5.52875 13.9223 6.00353 13.9316 6.29063 14.2302L12 20.1679L17.7094 14.2302C17.9965 13.9316 18.4713 13.9223 18.7698 14.2094C19.0684 14.4965 19.0777 14.9713 18.7906 15.2698L12.5406 21.7698Z" 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/chevron_up_down_24_regular.svg";

Details

Keywords

arrowdirectionupdown