Heat Map Icon
Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.
The Heat Map icon is commonly used in location finders, store locators and travel apps. Available as a free SVG - copy the code or download directly.
img tag
<img src="https://proicons.com/icon/317892.svg" alt="Heat Map icon" width="24" height="24">
React JSX
<img src="https://proicons.com/icon/317892.svg" alt="Heat Map icon" width={24} height={24} />
Vue template
<img src="https://proicons.com/icon/317892.svg" alt="Heat Map icon" :width="24" :height="24" />
CSS background
.icon-heat-map {
background-image: url('https://proicons.com/icon/317892.svg');
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}
SVG markup
<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<defs>
<style>
.cls-1 {
fill: none;
}
</style>
</defs>
<title>heat-map</title>
<rect x="20" y="18" width="2" height="2"/>
<rect x="28" y="16" width="2" height="2"/>
<rect x="14" y="6" width="2" height="2"/>
<path d="M16,22H12V16a2.0023,2.0023,0,0,0-2-2H4a2.0023,2.0023,0,0,0-2,2v6a2.0023,2.0023,0,0,0,2,2h6v4a2.0023,2.0023,0,0,0,2,2h4a2.0023,2.0023,0,0,0,2-2V24A2.0023,2.0023,0,0,0,16,22ZM4,22V16h6v6Zm8,6V24h4v4Z"/>
<path d="M28,30H24a2.0021,2.0021,0,0,1-2-2V24a2.0021,2.0021,0,0,1,2-2h4a2.0021,2.0021,0,0,1,2,2v4A2.0021,2.0021,0,0,1,28,30Zm-4-6v4h4V24Z"/>
<path d="M28,2H22a2.0023,2.0023,0,0,0-2,2v6H18a2.0023,2.0023,0,0,0-2,2v2a2.0023,2.0023,0,0,0,2,2h2a2.0023,2.0023,0,0,0,2-2V12h6a2.0023,2.0023,0,0,0,2-2V4A2.0023,2.0023,0,0,0,28,2ZM18,14V12h2v2Zm4-4V4h6v6Z"/>
<path d="M8,10H4A2.0021,2.0021,0,0,1,2,8V4A2.0021,2.0021,0,0,1,4,2H8a2.0021,2.0021,0,0,1,2,2V8A2.0021,2.0021,0,0,1,8,10ZM4,4V8H8V4Z"/>
<rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" class="cls-1" width="32" height="32"/>
</svg>
Heat Map in other icon packs
Copied!