Data Trending icon

Use the Data 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 { DataTrending24Regular, DataTrending24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_data_trending_24_regular.svg" width="24" height="24" alt="Data 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="M4.5 3.75C4.5 3.33579 4.16421 3 3.75 3C3.33579 3 3 3.33579 3 3.75V17.75C3 19.5449 4.45507 21 6.25 21H20.25C20.6642 21 21 20.6642 21 20.25C21 19.8358 20.6642 19.5 20.25 19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V3.75ZM14.75 6C14.3358 6 14 6.33579 14 6.75C14 7.16421 14.3358 7.5 14.75 7.5H17.9393L13.25 12.1893L11.2803 10.2197C10.9874 9.92678 10.5126 9.92678 10.2197 10.2197L6.46967 13.9697C6.17678 14.2626 6.17678 14.7374 6.46967 15.0303C6.76256 15.3232 7.23744 15.3232 7.53033 15.0303L10.75 11.8107L12.7197 13.7803C13.0126 14.0732 13.4874 14.0732 13.7803 13.7803L19.0015 8.55917L19.0015 11.755C19.0015 12.1692 19.3373 12.505 19.7515 12.505C20.1658 12.505 20.5015 12.1692 20.5015 11.755L20.5015 6.74999C20.5015 6.33578 20.1657 6 19.7515 6H14.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/data_trending_24_regular.svg";

Details

Keywords

datavizvisualizationchartmaptrendinggraph.usedindatavizscenarios.