A display band over a keypad of keys and an equals key, for totals, budgets and estimates. On a 24×24 grid in stroke, duotone and fill, free under MIT.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M7 2L17 2C18.6569 2 20 3.3431 20 5L20 19C20 20.6569 18.6569 22 17 22L7 22C5.3431 22 4 20.6569 4 19L4 5C4 3.3431 5.3431 2 7 2ZM4 6L20 6M12 18L16 18" fill="none"/>
<path d="M9 10C9 10.5523 8.5523 11 8 11C7.4477 11 7 10.5523 7 10C7 9.4477 7.4477 9 8 9C8.5523 9 9 9.4477 9 10ZM13 10C13 10.5523 12.5523 11 12 11C11.4477 11 11 10.5523 11 10C11 9.4477 11.4477 9 12 9C12.5523 9 13 9.4477 13 10ZM17 10C17 10.5523 16.5523 11 16 11C15.4477 11 15 10.5523 15 10C15 9.4477 15.4477 9 16 9C16.5523 9 17 9.4477 17 10ZM9 14C9 14.5523 8.5523 15 8 15C7.4477 15 7 14.5523 7 14C7 13.4477 7.4477 13 8 13C8.5523 13 9 13.4477 9 14ZM13 14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14C11 13.4477 11.4477 13 12 13C12.5523 13 13 13.4477 13 14ZM17 14C17 14.5523 16.5523 15 16 15C15.4477 15 15 14.5523 15 14C15 13.4477 15.4477 13 16 13C16.5523 13 17 13.4477 17 14ZM9 18C9 18.5523 8.5523 19 8 19C7.4477 19 7 18.5523 7 18C7 17.4477 7.4477 17 8 17C8.5523 17 9 17.4477 9 18Z" fill="currentColor" stroke="none"/>
</svg>Also called
What someone searching for this drawing would have typed instead. These are the words the browser's search matches on.
- calculate
- maths
- totals
- budget
- sum
- numbers
- accounting
Related icons
The rest of the calculator family first, then the Devices shelf.
FAQ
Answered from calculator's own facts: its shelf, the weights it was drawn in, its siblings and its dates.
- What is the calculator icon for?
- A display band over a keypad of keys and an equals key, for totals, budgets and estimates. It is filed under Devices in Keyline Icons, drawn on the same 24×24 grid as the rest of the set. People look for it as calculate, maths, totals, budget, sum, numbers and accounting, and the browser's search matches all of those.
- What styles does the calculator icon come in?
- All three: stroke, duotone and fill. They are drawn from the same geometry, so swapping weight never moves anything.
- Is there a square or circle version of calculator?
- No. calculator is drawn as a bare glyph, and the set has no boxed variant of it.
- What other icons go with calculator?
- app-check, app-dot, app-minus, app-plus, app-x and battery, and 12 more, all shown below. They are the Devices shelf: nothing else in the set is named after calculator.
- How do I import calculator in React?
- <Calculator /> is the component, and the weight decides the module: stroke from "@keyline-icons/react", duotone from "@keyline-icons/react/duotone" and fill from "@keyline-icons/react/fill". It takes the usual SVG props plus a size, so <Calculator size={16} /> and className="size-4" both work, and there is no provider or theme to set up.
- Where is the calculator SVG?
- icons/stroke/calculator.svg, icons/duotone/calculator.svg and icons/fill/calculator.svg in the repository, normalised: no wrapper, no ids and no classes to strip out. The tabs above hand you the same drawing as SVG or JSX without the download, and neither needs an install.
- When was calculator added to the set?
- Added 11 Sept 2026. It ships in v0.8.0, so an install at that version or later has it.
Questions about the set rather than about this drawing are answered where they belong. The home page covers what the set is, how the three styles differ, why some icons come boxed and where the Figma file is; installing the set in a shadcn/ui project covers the React package, the CLI and using an icon without React. The MIT licence is stated in the footer of every page.