Arrow Trending Down icon

Use the Arrow Trending 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 { ArrowTrendingDown24Regular, ArrowTrendingDown24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowTrendingDown24Regular aria-label="Arrow Trending Down" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_trending_down_24_regular.svg" width="24" height="24" alt="Arrow Trending 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="M13.7489 18.5002L21.3027 18.4997L21.403 18.4858L21.5018 18.4582L21.5621 18.4326C21.6413 18.3978 21.7155 18.3471 21.7808 18.2819L21.8215 18.2378L21.865 18.1814L21.9192 18.0913L21.9579 18.001L21.977 17.9369L21.9906 17.8729L22 17.7787L22.0004 10.2463C22.0004 9.83212 21.6647 9.49633 21.2504 9.49633C20.8708 9.49633 20.557 9.77849 20.5073 10.1446L20.5004 10.2463L20.5 15.9412L12.7812 8.22096C12.5149 7.95469 12.0982 7.93047 11.8046 8.14832L11.7205 8.22094L8.75001 11.1913L3.28033 5.72162C2.98744 5.42873 2.51256 5.42873 2.21967 5.72162C1.9534 5.98789 1.9292 6.40455 2.14705 6.69816L2.21967 6.78228L8.21967 12.7823C8.48593 13.0485 8.90259 13.0728 9.1962 12.8549L9.28032 12.7823L12.2508 9.81194L19.438 17.0002H13.7489C13.3692 17.0002 13.0554 17.2824 13.0058 17.6485L12.9989 17.7502C12.9989 18.1299 13.2811 18.4437 13.6472 18.4934L13.7489 18.5002Z" 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_trending_down_24_regular.svg";

Details

Keywords

arrowdirectiongrowthascending