rhombus 01 icon

rhombus-01 from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.

Name
rhombus-01
Set
Huge Icons
Style
Stroke
Viewbox
24×24
License
MIT

Use the rhombus 01 icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M8.056 4.789C9.916 2.929 10.845 2 12 2s2.085.93 3.944 2.789l3.267 3.267C21.071 9.916 22 10.845 22 12s-.93 2.085-2.789 3.944l-3.267 3.267C14.084 21.071 13.155 22 12 22s-2.085-.93-3.944-2.789L4.79 15.944C2.929 14.084 2 13.155 2 12s.93-2.085 2.789-3.944z"/></svg>

React

import type { SVGProps } from "react";

export function HugeiconsRhombus01(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.5" d="M8.056 4.789C9.916 2.929 10.845 2 12 2s2.085.93 3.944 2.789l3.267 3.267C21.071 9.916 22 10.845 22 12s-.93 2.085-2.789 3.944l-3.267 3.267C14.084 21.071 13.155 22 12 22s-2.085-.93-3.944-2.789L4.79 15.944C2.929 14.084 2 13.155 2 12s.93-2.085 2.789-3.944z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M8.056 4.789C9.916 2.929 10.845 2 12 2s2.085.93 3.944 2.789l3.267 3.267C21.071 9.916 22 10.845 22 12s-.93 2.085-2.789 3.944l-3.267 3.267C14.084 21.071 13.155 22 12 22s-2.085-.93-3.944-2.789L4.79 15.944C2.929 14.084 2 13.155 2 12s.93-2.085 2.789-3.944z"/></svg>
</template>

CSS

.icon-rhombus-01 {
  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%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M8.056%204.789C9.916%202.929%2010.845%202%2012%202s2.085.93%203.944%202.789l3.267%203.267C21.071%209.916%2022%2010.845%2022%2012s-.93%202.085-2.789%203.944l-3.267%203.267C14.084%2021.071%2013.155%2022%2012%2022s-2.085-.93-3.944-2.789L4.79%2015.944C2.929%2014.084%202%2013.155%202%2012s.93-2.085%202.789-3.944z%22%2F%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%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M8.056%204.789C9.916%202.929%2010.845%202%2012%202s2.085.93%203.944%202.789l3.267%203.267C21.071%209.916%2022%2010.845%2022%2012s-.93%202.085-2.789%203.944l-3.267%203.267C14.084%2021.071%2013.155%2022%2012%2022s-2.085-.93-3.944-2.789L4.79%2015.944C2.929%2014.084%202%2013.155%202%2012s.93-2.085%202.789-3.944z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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