Chevron Down Up icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M6.28033 2.96967C5.98744 2.67678 5.51256 2.67678 5.21967 2.96967C4.92678 3.26256 4.92678 3.73744 5.21967 4.03033L11.4697 10.2803C11.7626 10.5732 12.2374 10.5732 12.5303 10.2803L18.7803 4.03033C19.0732 3.73744 19.0732 3.26256 18.7803 2.96967C18.4874 2.67678 18.0126 2.67678 17.7197 2.96967L12 8.68934L6.28033 2.96967ZM6.28033 21.0303C5.98744 21.3232 5.51256 21.3232 5.21967 21.0303C4.92678 20.7374 4.92678 20.2626 5.21967 19.9697L11.4697 13.7197C11.7626 13.4268 12.2374 13.4268 12.5303 13.7197L18.7803 19.9697C19.0732 20.2626 19.0732 20.7374 18.7803 21.0303C18.4874 21.3232 18.0126 21.3232 17.7197 21.0303L12 15.3107L6.28033 21.0303Z" 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_down_up_24_regular.svg";

Details

Keywords

arrowchevron