Arrow Trending Wrench icon
Used to indicate growth. The Arrow Trending Wrench icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 2 sizes from 20 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Every size and style
Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.
Regular, 24 px
ic_fluent_arrow_trending_wrench_24_regular.svg
Arrow Trending Wrench icon in React
npm install @fluentui/react-icons
import { ArrowTrendingWrench24Regular } from "@fluentui/react-icons";
export function Example() {
return <ArrowTrendingWrench24Regular aria-label="Arrow Trending Wrench" />;
}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" />;
}Coding agents can look up this component through the Fluent Icons MCP server.
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>Details
| Name | Arrow Trending Wrench |
|---|---|
| Styles | Regular (outlined), Filled |
| Sizes | 20 px, 24 px |
| Regular (outlined) file | ic_fluent_arrow_trending_wrench_24_regular.svg |
| Filled file | ic_fluent_arrow_trending_wrench_24_filled.svg |
| React (Regular) | ArrowTrendingWrench20Regular, ArrowTrendingWrench24Regular |
| React (Filled) | ArrowTrendingWrench20Filled, ArrowTrendingWrench24Filled |
| License | MIT (© Microsoft Corporation) |