Arrow Trending icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_trending_24_regular.svg" width="24" height="24" alt="Arrow Trending">

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 5.5L21.3027 5.50052L21.403 5.51444L21.5018 5.54205L21.5621 5.5676C21.6413 5.60246 21.7155 5.65315 21.7808 5.71836L21.8215 5.7624L21.865 5.81878L21.9192 5.9089L21.9579 5.99922L21.977 6.0633L21.9906 6.1273L22 6.2215L22.0004 13.7539C22.0004 14.1681 21.6647 14.5039 21.2504 14.5039C20.8708 14.5039 20.557 14.2217 20.5073 13.8557L20.5004 13.7539L20.5 8.059L12.7812 15.7793C12.5149 16.0455 12.0982 16.0698 11.8046 15.8519L11.7205 15.7793L8.75001 12.8089L3.28033 18.2786C2.98744 18.5715 2.51256 18.5715 2.21967 18.2786C1.9534 18.0123 1.9292 17.5957 2.14705 17.3021L2.21967 17.2179L8.21967 11.2179C8.48593 10.9517 8.90259 10.9275 9.1962 11.1453L9.28032 11.2179L12.2508 14.1883L19.438 7H13.7489C13.3692 7 13.0554 6.71785 13.0058 6.35177L12.9989 6.25C12.9989 5.8703 13.2811 5.55651 13.6472 5.50685L13.7489 5.5Z" 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_24_regular.svg";

Details

Keywords

arrowdirectiongrowthascending