Calculator Icon
Free SVG icon from the Mage Icons collection. Download or copy for use in any project.
The Calculator icon is available as a free SVG and is ready to drop into any web or app project.
img tag
<img src="https://proicons.com/icon/310579.svg" alt="Calculator icon" width="24" height="24">
React JSX
<img src="https://proicons.com/icon/310579.svg" alt="Calculator icon" width={24} height={24} />
Vue template
<img src="https://proicons.com/icon/310579.svg" alt="Calculator icon" :width="24" :height="24" />
CSS background
.icon-calculator {
background-image: url('https://proicons.com/icon/310579.svg');
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}
SVG markup
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 2.75H8C5.79086 2.75 4 4.54086 4 6.75V17.25C4 19.4591 5.79086 21.25 8 21.25H16C18.2091 21.25 20 19.4591 20 17.25V6.75C20 4.54086 18.2091 2.75 16 2.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.0826 6H7.91743C7.41075 6 7 6.44772 7 7V9C7 9.55228 7.41075 10 7.91743 10H16.0826C16.5893 10 17 9.55228 17 9V7C17 6.44772 16.5893 6 16.0826 6Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7.5 13H8.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M11.5 13H12.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M15.5 13H16.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7.5 15.5H8.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M11.5 15.5H12.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M15.5 15.5H16.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7.5 18H8.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M11.5 18H12.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M15.5 18H16.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
Calculator in other icon packs
Copied!