Calculator Multiple icon

Use the Calculator Multiple 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 { CalculatorMultiple24Regular, CalculatorMultiple24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M7.75 5C6.7835 5 6 5.7835 6 6.75V7.75C6 8.7165 6.7835 9.5 7.75 9.5H13.25C14.2165 9.5 15 8.7165 15 7.75V6.75C15 5.7835 14.2165 5 13.25 5H7.75ZM7.5 6.75C7.5 6.61193 7.61193 6.5 7.75 6.5H13.25C13.3881 6.5 13.5 6.61193 13.5 6.75V7.75C13.5 7.88807 13.3881 8 13.25 8H7.75C7.61193 8 7.5 7.88807 7.5 7.75V6.75ZM10.5 10.75C9.80964 10.75 9.25 11.3096 9.25 12C9.25 12.6904 9.80964 13.25 10.5 13.25C11.1904 13.25 11.75 12.6904 11.75 12C11.75 11.3096 11.1904 10.75 10.5 10.75ZM9.25 15.5C9.25 14.8096 9.80964 14.25 10.5 14.25C11.1904 14.25 11.75 14.8096 11.75 15.5C11.75 16.1904 11.1904 16.75 10.5 16.75C9.80964 16.75 9.25 16.1904 9.25 15.5ZM7 10.75C6.30964 10.75 5.75 11.3096 5.75 12C5.75 12.6904 6.30964 13.25 7 13.25C7.69036 13.25 8.25 12.6904 8.25 12C8.25 11.3096 7.69036 10.75 7 10.75ZM5.75 15.5C5.75 14.8096 6.30964 14.25 7 14.25C7.69036 14.25 8.25 14.8096 8.25 15.5C8.25 16.1904 7.69036 16.75 7 16.75C6.30964 16.75 5.75 16.1904 5.75 15.5ZM14 10.75C13.3096 10.75 12.75 11.3096 12.75 12C12.75 12.6904 13.3096 13.25 14 13.25C14.6904 13.25 15.25 12.6904 15.25 12C15.25 11.3096 14.6904 10.75 14 10.75ZM12.75 15.5C12.75 14.8096 13.3096 14.25 14 14.25C14.6904 14.25 15.25 14.8096 15.25 15.5C15.25 16.1904 14.6904 16.75 14 16.75C13.3096 16.75 12.75 16.1904 12.75 15.5ZM6.1371 2C4.40453 2 3 3.40453 3 5.1371V16.3629C3 18.0955 4.40453 19.5 6.1371 19.5H14.8629C16.5955 19.5 18 18.0955 18 16.3629V5.1371C18 3.40453 16.5955 2 14.8629 2H6.1371ZM4.5 5.1371C4.5 4.23295 5.23295 3.5 6.1371 3.5H14.8629C15.767 3.5 16.5 4.23295 16.5 5.1371V16.3629C16.5 17.267 15.767 18 14.8629 18H6.1371C5.23295 18 4.5 17.267 4.5 16.3629V5.1371ZM5.80078 20.4866C6.25339 21.3841 7.18341 22.0001 8.25776 22.0001H15.2499C18.1493 22.0001 20.4998 19.6496 20.4999 16.7501L20.5 7.25001C20.5 6.17564 19.884 5.24516 18.9858 4.7926C18.9952 4.90622 18.9999 5.02115 18.9999 5.13718V7.23592L19 7.24998L18.9999 16.363L18.9999 16.3859L18.9999 16.7501C18.9998 18.8212 17.3209 20.5001 15.2499 20.5001H14.8752L14.8628 20.5001H6.13704C6.02383 20.5001 5.91169 20.4955 5.80078 20.4866Z" 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/calculator_multiple_24_regular.svg";

Details

Keywords

mathformulasaddsubtractmultiplydivde