Wrench Settings icon
Used to represent general maintenance & tooling scenarios. The Wrench Settings icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Wrench Settings 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 { WrenchSettings24Regular, WrenchSettings24Filled } from "@fluentui/react-icons";
export function Example() {
return <WrenchSettings24Regular aria-label="Wrench Settings" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_wrench_settings_24_regular.svg" width="24" height="24" alt="Wrench Settings"> 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="M16.5002 2C13.4627 2 11.0002 4.46243 11.0002 7.5C11.0002 7.94322 11.0528 8.37496 11.1523 8.78899L2.84099 17.1003C1.71967 18.2216 1.71967 20.0396 2.84099 21.1609C3.96231 22.2823 5.78033 22.2823 6.90165 21.1609L11.0155 17.0471C11.0996 15.8257 11.5211 14.6971 12.1875 13.7538L5.84099 20.1003C5.30546 20.6358 4.43718 20.6358 3.90165 20.1003C3.36612 19.5648 3.36612 18.6965 3.90165 18.1609L12.5248 9.53783C12.7258 9.33677 12.7959 9.0393 12.7057 8.76964C12.5726 8.37169 12.5002 7.94506 12.5002 7.5C12.5002 5.29086 14.2911 3.5 16.5002 3.5C16.6415 3.5 16.781 3.5073 16.9183 3.52153L15.0737 5.36612C14.5855 5.85427 14.5855 6.64573 15.0737 7.13388L16.8666 8.92678C17.3547 9.41493 18.1462 9.41493 18.6344 8.92678L20.4787 7.08239C20.4929 7.21955 20.5002 7.35886 20.5002 7.5C20.5002 9.04643 19.6227 10.3879 18.3384 11.0536C18.9902 11.1375 19.6118 11.318 20.1883 11.5802C21.3011 10.5738 22.0002 9.11855 22.0002 7.5C22.0002 6.73337 21.8429 6.00153 21.5582 5.33652C21.4602 5.10771 21.2551 4.94241 21.0107 4.8953C20.7663 4.8482 20.5144 4.92542 20.3384 5.10142L17.7505 7.68934L16.3111 6.25L18.8991 3.66198C19.0751 3.48599 19.1524 3.23414 19.1053 2.98974C19.0582 2.74534 18.8929 2.54023 18.6641 2.44223C17.999 2.15735 17.267 2 16.5002 2ZM14.2772 13.9756C14.592 15.0659 13.9376 16.1993 12.836 16.4718L12.2518 16.6164C12.2069 16.9041 12.1836 17.1992 12.1836 17.5001C12.1836 17.8147 12.2091 18.1232 12.2582 18.4235L12.7976 18.5534C13.9102 18.8213 14.5715 19.9663 14.2476 21.0639L14.0613 21.6951C14.5005 22.0808 15.0009 22.3939 15.5455 22.6167L16.0388 22.098C16.8273 21.2687 18.1496 21.2689 18.9379 22.0985L19.4366 22.6232C19.9801 22.403 20.4801 22.0928 20.9194 21.7103L20.7214 21.0244C20.4066 19.9342 21.061 18.8007 22.1626 18.5282L22.7463 18.3838C22.7912 18.0961 22.8145 17.8009 22.8145 17.5001C22.8145 17.1853 22.789 16.8767 22.7399 16.5764L22.2009 16.4466C21.0884 16.1787 20.4271 15.0337 20.751 13.9362L20.9371 13.3053C20.498 12.9196 19.9975 12.6064 19.4529 12.3835L18.9598 12.9021C18.1713 13.7313 16.849 13.7311 16.0607 12.9016L15.5619 12.3767C15.0184 12.5969 14.5184 12.9071 14.0791 13.2894L14.2772 13.9756ZM17.4991 19.0001C16.6984 19.0001 16.0494 18.3285 16.0494 17.5001C16.0494 16.6716 16.6984 16.0001 17.4991 16.0001C18.2997 16.0001 18.9487 16.6716 18.9487 17.5001C18.9487 18.3285 18.2997 19.0001 17.4991 19.0001Z" 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/wrench_settings_24_regular.svg";Details
| Name | Wrench Settings |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_wrench_settings_24_regular.svg |
| Filled file | ic_fluent_wrench_settings_24_filled.svg |
| React components | WrenchSettings24Regular, WrenchSettings24Filled |
| License | MIT (© Microsoft Corporation) |