Money Settings icon
Used in retail, purchase and invoicing scenarios. The Money 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 Money 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 { MoneySettings24Regular, MoneySettings24Filled } from "@fluentui/react-icons";
export function Example() {
return <MoneySettings24Regular aria-label="Money Settings" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_money_settings_24_regular.svg" width="24" height="24" alt="Money 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="M10.5 8C8.84315 8 7.5 9.34315 7.5 11C7.5 12.6569 8.84315 14 10.5 14C12.1569 14 13.5 12.6569 13.5 11C13.5 9.34315 12.1569 8 10.5 8ZM9 11C9 10.1716 9.67157 9.5 10.5 9.5C11.3284 9.5 12 10.1716 12 11C12 11.8284 11.3284 12.5 10.5 12.5C9.67157 12.5 9 11.8284 9 11ZM2 7.25C2 6.00736 3.00736 5 4.25 5H16.75C17.9926 5 19 6.00736 19 7.25V11.1739C18.5185 11.0602 18.0163 11 17.5 11V9.5H16.75C15.5074 9.5 14.5 8.49264 14.5 7.25V6.5H6.5V7.25C6.5 8.49264 5.49264 9.5 4.25 9.5H3.5V12.5H4.25C5.49264 12.5 6.5 13.5074 6.5 14.75V15.5H11.3135C11.159 15.9782 11.0585 16.4805 11.0189 17H4.25C3.00736 17 2 15.9926 2 14.75V7.25ZM4.40137 18.5H11.0765C11.1572 19.0232 11.3004 19.5258 11.4982 20H7.00002C5.8896 20 4.92008 19.3967 4.40137 18.5ZM20.5 11.7322C21.051 12.0194 21.5558 12.3832 22 12.8096V10C22 8.8896 21.3967 7.92008 20.5 7.40137V11.7322ZM4.25 6.5C3.83579 6.5 3.5 6.83579 3.5 7.25V8H4.25C4.66421 8 5 7.66421 5 7.25V6.5H4.25ZM17.5 8V7.25C17.5 6.83579 17.1642 6.5 16.75 6.5H16V7.25C16 7.66421 16.3358 8 16.75 8H17.5ZM3.5 14.75C3.5 15.1642 3.83579 15.5 4.25 15.5H5V14.75C5 14.3358 4.66421 14 4.25 14H3.5V14.75ZM14.2782 13.9756C14.593 15.0659 13.9386 16.1993 12.837 16.4718L12.2528 16.6164C12.2079 16.9041 12.1846 17.1992 12.1846 17.5001C12.1846 17.8147 12.2101 18.1232 12.2592 18.4235L12.7986 18.5534C13.9111 18.8213 14.5725 19.9663 14.2486 21.0639L14.0623 21.6951C14.5014 22.0808 15.0019 22.3939 15.5464 22.6167L16.0397 22.098C16.8283 21.2687 18.1506 21.2689 18.9388 22.0985L19.4375 22.6232C19.9811 22.403 20.4811 22.0928 20.9204 21.7103L20.7223 21.0244C20.4076 19.9342 21.062 18.8007 22.1635 18.5282L22.7472 18.3838C22.7922 18.0961 22.8155 17.8009 22.8155 17.5001C22.8155 17.1853 22.7899 16.8767 22.7409 16.5764L22.2019 16.4466C21.0894 16.1787 20.4281 15.0337 20.7519 13.9362L20.9381 13.3053C20.499 12.9196 19.9985 12.6064 19.4539 12.3835L18.9608 12.9021C18.1722 13.7313 16.85 13.7311 16.0617 12.9016L15.5629 12.3767C15.0193 12.5969 14.5194 12.9071 14.0801 13.2894L14.2782 13.9756ZM17.5 19.0001C16.6994 19.0001 16.0504 18.3285 16.0504 17.5001C16.0504 16.6716 16.6994 16.0001 17.5 16.0001C18.3007 16.0001 18.9497 16.6716 18.9497 17.5001C18.9497 18.3285 18.3007 19.0001 17.5 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/money_settings_24_regular.svg";Details
| Name | Money Settings |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_money_settings_24_regular.svg |
| Filled file | ic_fluent_money_settings_24_filled.svg |
| React components | MoneySettings24Regular, MoneySettings24Filled |
| License | MIT (© Microsoft Corporation) |