contracts icon

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

Name
contracts
Set
Huge Icons
Style
Stroke
Viewbox
24×24
License
MIT

Use the contracts 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-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M18 6c-.047-1.553-.22-2.48-.862-3.121C16.258 2 14.842 2 12.01 2H8.007c-2.832 0-4.248 0-5.127.879C2 3.757 2 5.172 2 8v8c0 2.828 0 4.243.88 5.121S5.175 22 8.007 22h4.004c2.831 0 4.247 0 5.127-.879c.642-.641.815-1.567.862-3.121"/><path d="m20.242 11.742l1.177-1.177c.27-.27.406-.406.478-.552a1 1 0 0 0 0-.88c-.072-.146-.208-.282-.478-.552s-.406-.406-.552-.478a1 1 0 0 0-.88 0c-.146.072-.281.208-.552.478l-1.177 1.177m1.984 1.984l-5.266 5.266L12 18l.992-2.976l5.266-5.266m1.984 1.984l-1.984-1.984M5 19h1l1.25-2.5L8.5 19h1M6 6h8m-8 4h6"/></g></svg>

React

import type { SVGProps } from "react";

export function HugeiconsContracts(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" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"><path d="M18 6c-.047-1.553-.22-2.48-.862-3.121C16.258 2 14.842 2 12.01 2H8.007c-2.832 0-4.248 0-5.127.879C2 3.757 2 5.172 2 8v8c0 2.828 0 4.243.88 5.121S5.175 22 8.007 22h4.004c2.831 0 4.247 0 5.127-.879c.642-.641.815-1.567.862-3.121"/><path d="m20.242 11.742l1.177-1.177c.27-.27.406-.406.478-.552a1 1 0 0 0 0-.88c-.072-.146-.208-.282-.478-.552s-.406-.406-.552-.478a1 1 0 0 0-.88 0c-.146.072-.281.208-.552.478l-1.177 1.177m1.984 1.984l-5.266 5.266L12 18l.992-2.976l5.266-5.266m1.984 1.984l-1.984-1.984M5 19h1l1.25-2.5L8.5 19h1M6 6h8m-8 4h6"/></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-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M18 6c-.047-1.553-.22-2.48-.862-3.121C16.258 2 14.842 2 12.01 2H8.007c-2.832 0-4.248 0-5.127.879C2 3.757 2 5.172 2 8v8c0 2.828 0 4.243.88 5.121S5.175 22 8.007 22h4.004c2.831 0 4.247 0 5.127-.879c.642-.641.815-1.567.862-3.121"/><path d="m20.242 11.742l1.177-1.177c.27-.27.406-.406.478-.552a1 1 0 0 0 0-.88c-.072-.146-.208-.282-.478-.552s-.406-.406-.552-.478a1 1 0 0 0-.88 0c-.146.072-.281.208-.552.478l-1.177 1.177m1.984 1.984l-5.266 5.266L12 18l.992-2.976l5.266-5.266m1.984 1.984l-1.984-1.984M5 19h1l1.25-2.5L8.5 19h1M6 6h8m-8 4h6"/></g></svg>
</template>

CSS

.icon-contracts {
  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-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M18%206c-.047-1.553-.22-2.48-.862-3.121C16.258%202%2014.842%202%2012.01%202H8.007c-2.832%200-4.248%200-5.127.879C2%203.757%202%205.172%202%208v8c0%202.828%200%204.243.88%205.121S5.175%2022%208.007%2022h4.004c2.831%200%204.247%200%205.127-.879c.642-.641.815-1.567.862-3.121%22%2F%3E%3Cpath%20d%3D%22m20.242%2011.742l1.177-1.177c.27-.27.406-.406.478-.552a1%201%200%200%200%200-.88c-.072-.146-.208-.282-.478-.552s-.406-.406-.552-.478a1%201%200%200%200-.88%200c-.146.072-.281.208-.552.478l-1.177%201.177m1.984%201.984l-5.266%205.266L12%2018l.992-2.976l5.266-5.266m1.984%201.984l-1.984-1.984M5%2019h1l1.25-2.5L8.5%2019h1M6%206h8m-8%204h6%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-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M18%206c-.047-1.553-.22-2.48-.862-3.121C16.258%202%2014.842%202%2012.01%202H8.007c-2.832%200-4.248%200-5.127.879C2%203.757%202%205.172%202%208v8c0%202.828%200%204.243.88%205.121S5.175%2022%208.007%2022h4.004c2.831%200%204.247%200%205.127-.879c.642-.641.815-1.567.862-3.121%22%2F%3E%3Cpath%20d%3D%22m20.242%2011.742l1.177-1.177c.27-.27.406-.406.478-.552a1%201%200%200%200%200-.88c-.072-.146-.208-.282-.478-.552s-.406-.406-.552-.478a1%201%200%200%200-.88%200c-.146.072-.281.208-.552.478l-1.177%201.177m1.984%201.984l-5.266%205.266L12%2018l.992-2.976l5.266-5.266m1.984%201.984l-1.984-1.984M5%2019h1l1.25-2.5L8.5%2019h1M6%206h8m-8%204h6%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/contracts.svg?color=%231a73e8&size=48