circle stack icon

circle-stack-solid from HeroIcons by Refactoring UI Inc · Solid 24x24 · MIT Free for personal and commercial use.

Name: circle-stack-solid
Set: HeroIcons
Style: Solid 24x24
Viewbox: 24×24
License: MIT

3 other variants in HeroIcons

circle-stack circle-stack-16-solid circle-stack-20-solid

Use the circle stack icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M21 6.375c0 2.692-4.03 4.875-9 4.875S3 9.067 3 6.375S7.03 1.5 12 1.5s9 2.183 9 4.875"/><path d="M12 12.75c2.685 0 5.19-.586 7.078-1.609a8.3 8.3 0 0 0 1.897-1.384q.024.182.025.368C21 12.817 16.97 15 12 15s-9-2.183-9-4.875q0-.186.025-.368a8.3 8.3 0 0 0 1.897 1.384C6.809 12.164 9.315 12.75 12 12.75"/><path d="M12 16.5c2.685 0 5.19-.586 7.078-1.609a8.3 8.3 0 0 0 1.897-1.384q.024.182.025.368c0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875q0-.186.025-.368a8.3 8.3 0 0 0 1.897 1.384C6.809 15.914 9.315 16.5 12 16.5"/><path d="M12 20.25c2.685 0 5.19-.586 7.078-1.609a8.3 8.3 0 0 0 1.897-1.384q.024.182.025.368c0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875q0-.186.025-.368a8.3 8.3 0 0 0 1.897 1.384C6.809 19.664 9.315 20.25 12 20.25"/></g></svg>

React

import type { SVGProps } from "react";

export function HeroiconsCircleStackSolid(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M21 6.375c0 2.692-4.03 4.875-9 4.875S3 9.067 3 6.375S7.03 1.5 12 1.5s9 2.183 9 4.875"/><path d="M12 12.75c2.685 0 5.19-.586 7.078-1.609a8.3 8.3 0 0 0 1.897-1.384q.024.182.025.368C21 12.817 16.97 15 12 15s-9-2.183-9-4.875q0-.186.025-.368a8.3 8.3 0 0 0 1.897 1.384C6.809 12.164 9.315 12.75 12 12.75"/><path d="M12 16.5c2.685 0 5.19-.586 7.078-1.609a8.3 8.3 0 0 0 1.897-1.384q.024.182.025.368c0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875q0-.186.025-.368a8.3 8.3 0 0 0 1.897 1.384C6.809 15.914 9.315 16.5 12 16.5"/><path d="M12 20.25c2.685 0 5.19-.586 7.078-1.609a8.3 8.3 0 0 0 1.897-1.384q.024.182.025.368c0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875q0-.186.025-.368a8.3 8.3 0 0 0 1.897 1.384C6.809 19.664 9.315 20.25 12 20.25"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M21 6.375c0 2.692-4.03 4.875-9 4.875S3 9.067 3 6.375S7.03 1.5 12 1.5s9 2.183 9 4.875"/><path d="M12 12.75c2.685 0 5.19-.586 7.078-1.609a8.3 8.3 0 0 0 1.897-1.384q.024.182.025.368C21 12.817 16.97 15 12 15s-9-2.183-9-4.875q0-.186.025-.368a8.3 8.3 0 0 0 1.897 1.384C6.809 12.164 9.315 12.75 12 12.75"/><path d="M12 16.5c2.685 0 5.19-.586 7.078-1.609a8.3 8.3 0 0 0 1.897-1.384q.024.182.025.368c0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875q0-.186.025-.368a8.3 8.3 0 0 0 1.897 1.384C6.809 15.914 9.315 16.5 12 16.5"/><path d="M12 20.25c2.685 0 5.19-.586 7.078-1.609a8.3 8.3 0 0 0 1.897-1.384q.024.182.025.368c0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875q0-.186.025-.368a8.3 8.3 0 0 0 1.897 1.384C6.809 19.664 9.315 20.25 12 20.25"/></g></svg>
</template>

CSS

.icon-circle-stack-solid {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M21%206.375c0%202.692-4.03%204.875-9%204.875S3%209.067%203%206.375S7.03%201.5%2012%201.5s9%202.183%209%204.875%22%2F%3E%3Cpath%20d%3D%22M12%2012.75c2.685%200%205.19-.586%207.078-1.609a8.3%208.3%200%200%200%201.897-1.384q.024.182.025.368C21%2012.817%2016.97%2015%2012%2015s-9-2.183-9-4.875q0-.186.025-.368a8.3%208.3%200%200%200%201.897%201.384C6.809%2012.164%209.315%2012.75%2012%2012.75%22%2F%3E%3Cpath%20d%3D%22M12%2016.5c2.685%200%205.19-.586%207.078-1.609a8.3%208.3%200%200%200%201.897-1.384q.024.182.025.368c0%202.692-4.03%204.875-9%204.875s-9-2.183-9-4.875q0-.186.025-.368a8.3%208.3%200%200%200%201.897%201.384C6.809%2015.914%209.315%2016.5%2012%2016.5%22%2F%3E%3Cpath%20d%3D%22M12%2020.25c2.685%200%205.19-.586%207.078-1.609a8.3%208.3%200%200%200%201.897-1.384q.024.182.025.368c0%202.692-4.03%204.875-9%204.875s-9-2.183-9-4.875q0-.186.025-.368a8.3%208.3%200%200%200%201.897%201.384C6.809%2019.664%209.315%2020.25%2012%2020.25%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M21%206.375c0%202.692-4.03%204.875-9%204.875S3%209.067%203%206.375S7.03%201.5%2012%201.5s9%202.183%209%204.875%22%2F%3E%3Cpath%20d%3D%22M12%2012.75c2.685%200%205.19-.586%207.078-1.609a8.3%208.3%200%200%200%201.897-1.384q.024.182.025.368C21%2012.817%2016.97%2015%2012%2015s-9-2.183-9-4.875q0-.186.025-.368a8.3%208.3%200%200%200%201.897%201.384C6.809%2012.164%209.315%2012.75%2012%2012.75%22%2F%3E%3Cpath%20d%3D%22M12%2016.5c2.685%200%205.19-.586%207.078-1.609a8.3%208.3%200%200%200%201.897-1.384q.024.182.025.368c0%202.692-4.03%204.875-9%204.875s-9-2.183-9-4.875q0-.186.025-.368a8.3%208.3%200%200%200%201.897%201.384C6.809%2015.914%209.315%2016.5%2012%2016.5%22%2F%3E%3Cpath%20d%3D%22M12%2020.25c2.685%200%205.19-.586%207.078-1.609a8.3%208.3%200%200%200%201.897-1.384q.024.182.025.368c0%202.692-4.03%204.875-9%204.875s-9-2.183-9-4.875q0-.186.025-.368a8.3%208.3%200%200%200%201.897%201.384C6.809%2019.664%209.315%2020.25%2012%2020.25%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/heroicons/circle-stack-solid.svg?color=%231a73e8&size=48