Money Calculator icon

Use the Money Calculator 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 { MoneyCalculator24Regular, MoneyCalculator24Filled } from "@fluentui/react-icons";

export function Example() {
  return <MoneyCalculator24Regular aria-label="Money Calculator" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_money_calculator_24_regular.svg" width="24" height="24" alt="Money Calculator">

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 7C8.84315 7 7.5 8.34315 7.5 10C7.5 11.6569 8.84315 13 10.5 13C12.1569 13 13.5 11.6569 13.5 10C13.5 8.34315 12.1569 7 10.5 7ZM9 10C9 9.17157 9.67157 8.5 10.5 8.5C11.3284 8.5 12 9.17157 12 10C12 10.8284 11.3284 11.5 10.5 11.5C9.67157 11.5 9 10.8284 9 10ZM2 6.25C2 5.00736 3.00736 4 4.25 4H16.75C17.9926 4 19 5.00736 19 6.25V11H17.5V8.5H16.75C15.5074 8.5 14.5 7.49264 14.5 6.25V5.5H6.5V6.25C6.5 7.49264 5.49264 8.5 4.25 8.5H3.5V11.5H4.25C5.49264 11.5 6.5 12.5074 6.5 13.75V14.5H14V16H4.25C3.00736 16 2 14.9926 2 13.75V6.25ZM4.25 5.5C3.83579 5.5 3.5 5.83579 3.5 6.25V7H4.25C4.66421 7 5 6.66421 5 6.25V5.5H4.25ZM17.5 7V6.25C17.5 5.83579 17.1642 5.5 16.75 5.5H16V6.25C16 6.66421 16.3358 7 16.75 7H17.5ZM3.5 13.75C3.5 14.1642 3.83579 14.5 4.25 14.5H5V13.75C5 13.3358 4.66421 13 4.25 13H3.5V13.75ZM4.40137 17.5H14V19H7.00002C5.8896 19 4.92008 18.3967 4.40137 17.5ZM22 11V9.00002C22 7.8896 21.3967 6.92008 20.5 6.40137V11H22ZM16.5 12C15.6716 12 15 12.6716 15 13.5V21.5C15 22.3284 15.6716 23 16.5 23H21.4998C22.3282 23 22.9998 22.3284 22.9998 21.5V13.5C22.9998 12.6716 22.3282 12 21.4998 12H16.5ZM17 16.5H17.9998C18.2759 16.5 18.4998 16.7239 18.4998 17C18.4998 17.2761 18.2759 17.5 17.9998 17.5H17C16.7239 17.5 16.5 17.2761 16.5 17C16.5 16.7239 16.7239 16.5 17 16.5ZM20 16.5H21C21.2761 16.5 21.5 16.7239 21.5 17C21.5 17.2761 21.2761 17.5 21 17.5H20C19.7239 17.5 19.5 17.2761 19.5 17C19.5 16.7239 19.7239 16.5 20 16.5ZM17 18.5H17.9998C18.2759 18.5 18.4998 18.7239 18.4998 19C18.4998 19.2761 18.2759 19.5 17.9998 19.5H17C16.7239 19.5 16.5 19.2761 16.5 19C16.5 18.7239 16.7239 18.5 17 18.5ZM20 18.5H21C21.2761 18.5 21.5 18.7239 21.5 19C21.5 19.2761 21.2761 19.5 21 19.5H20C19.7239 19.5 19.5 19.2761 19.5 19C19.5 18.7239 19.7239 18.5 20 18.5ZM17 20.5H17.9998C18.2759 20.5 18.4998 20.7239 18.4998 21C18.4998 21.2761 18.2759 21.5 17.9998 21.5H17C16.7239 21.5 16.5 21.2761 16.5 21C16.5 20.7239 16.7239 20.5 17 20.5ZM20 20.5H21C21.2761 20.5 21.5 20.7239 21.5 21C21.5 21.2761 21.2761 21.5 21 21.5H20C19.7239 21.5 19.5 21.2761 19.5 21C19.5 20.7239 19.7239 20.5 20 20.5ZM16.4999 13.9999C16.4999 13.7238 16.7238 13.4999 16.9999 13.4999H20.9999C21.276 13.4999 21.4999 13.7238 21.4999 13.9999V14.9999C21.4999 15.276 21.276 15.4999 20.9999 15.4999H16.9999C16.7238 15.4999 16.4999 15.276 16.4999 14.9999V13.9999Z" 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_calculator_24_regular.svg";

Details

Keywords

currencyretailcashpurchase