Arrow Trending Wrench icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M21 3.75001C21 3.3358 20.6642 3.00001 20.25 3.00001L15.25 3C14.8358 3 14.5 3.33578 14.5 3.75C14.5 4.16421 14.8358 4.5 15.25 4.5L18.4394 4.50001L13 9.93934L10.7803 7.71967C10.4874 7.42678 10.0126 7.42678 9.71967 7.71967L3.21967 14.2197C2.92678 14.5126 2.92678 14.9874 3.21967 15.2803C3.51256 15.5732 3.98744 15.5732 4.28033 15.2803L10.25 9.31066L12.4697 11.5303C12.7626 11.8232 13.2374 11.8232 13.5303 11.5303L19.5 5.56066L19.5 8.74998C19.5 9.16419 19.8358 9.49998 20.25 9.49998C20.6642 9.49998 21 9.16419 21 8.74997L21 3.75001ZM20.4801 11.833C20.7309 11.5823 20.6451 11.1597 20.2987 11.0842C19.0123 10.8036 17.6142 11.1634 16.6141 12.1636C15.427 13.3507 15.142 15.0983 15.7592 16.5546L12.0178 20.2959C11.432 20.8817 11.432 21.8315 12.0178 22.4173C12.6036 23.0031 13.5534 23.0031 14.1392 22.4173L17.8808 18.6757C19.3368 19.2924 21.084 19.0073 22.2709 17.8204C23.2711 16.8203 23.6309 15.4222 23.3503 14.1358C23.2747 13.7893 22.8522 13.7036 22.6015 13.9543L20.8566 15.6993C20.2708 16.285 19.321 16.285 18.7352 15.6993C18.1495 15.1135 18.1495 14.1637 18.7352 13.5779L20.4801 11.833Z" 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_wrench_24_regular.svg";

Details

Keywords

arrowdirectiongrowthascendingtool