blend icon

blend from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.

Name: blend
Set: Huge Icons
Style: Stroke
Viewbox: 24×24
License: MIT

The same icon in other sets

Use the blend icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="17" cy="17" r="5"/><path d="M7.5 13H6.4c-2.074 0-3.111 0-3.756-.644C2 11.71 2 10.674 2 8.6V6.4c0-2.074 0-3.111.644-3.756C3.29 2 4.326 2 6.4 2h2.2c2.074 0 3.111 0 3.756.644C13 3.29 13 4.326 13 6.4v1.1"/><path d="M12.035 19a6.043 6.043 0 0 1 1.007-12A6.04 6.04 0 0 1 19 12.035"/></g></svg>

React

import type { SVGProps } from "react";

export function HugeiconsBlend(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="17" cy="17" r="5"/><path d="M7.5 13H6.4c-2.074 0-3.111 0-3.756-.644C2 11.71 2 10.674 2 8.6V6.4c0-2.074 0-3.111.644-3.756C3.29 2 4.326 2 6.4 2h2.2c2.074 0 3.111 0 3.756.644C13 3.29 13 4.326 13 6.4v1.1"/><path d="M12.035 19a6.043 6.043 0 0 1 1.007-12A6.04 6.04 0 0 1 19 12.035"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="17" cy="17" r="5"/><path d="M7.5 13H6.4c-2.074 0-3.111 0-3.756-.644C2 11.71 2 10.674 2 8.6V6.4c0-2.074 0-3.111.644-3.756C3.29 2 4.326 2 6.4 2h2.2c2.074 0 3.111 0 3.756.644C13 3.29 13 4.326 13 6.4v1.1"/><path d="M12.035 19a6.043 6.043 0 0 1 1.007-12A6.04 6.04 0 0 1 19 12.035"/></g></svg>
</template>

CSS

.icon-blend {
  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%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M7.5%2013H6.4c-2.074%200-3.111%200-3.756-.644C2%2011.71%202%2010.674%202%208.6V6.4c0-2.074%200-3.111.644-3.756C3.29%202%204.326%202%206.4%202h2.2c2.074%200%203.111%200%203.756.644C13%203.29%2013%204.326%2013%206.4v1.1%22%2F%3E%3Cpath%20d%3D%22M12.035%2019a6.043%206.043%200%200%201%201.007-12A6.04%206.04%200%200%201%2019%2012.035%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%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M7.5%2013H6.4c-2.074%200-3.111%200-3.756-.644C2%2011.71%202%2010.674%202%208.6V6.4c0-2.074%200-3.111.644-3.756C3.29%202%204.326%202%206.4%202h2.2c2.074%200%203.111%200%203.756.644C13%203.29%2013%204.326%2013%206.4v1.1%22%2F%3E%3Cpath%20d%3D%22M12.035%2019a6.043%206.043%200%200%201%201.007-12A6.04%206.04%200%200%201%2019%2012.035%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/hugeicons/blend.svg?color=%231a73e8&size=48