yabai logo

yabai from Simple Icons by Simple Icons Collaborators · Brand · CC0-1.0 Free for personal and commercial use.

Name
yabai
Set
Simple Icons
Style
Brand
Viewbox
24×24
License
CC0 1.0

Use the yabai logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12.075 0a3.26 3.26 0 0 0-2.38.955L6.216 4.431l-.53-.529c-1.2-1.055-2.822.514-1.745 1.742l.531.531L.976 9.671a3.263 3.263 0 0 0 0 4.613L4.47 17.78l-.068.066l-.516.514c-1.07 1.206.472 2.816 1.707 1.775l.598-.594l3.502 3.502a3.263 3.263 0 0 0 4.615 0l8.714-8.714a3.263 3.263 0 0 0 0-4.615l.002-.002l-3.486-3.488l.58-.58a1.233 1.233 0 0 0-1.744-1.742l-.56.56L14.306.956A3.26 3.26 0 0 0 12.075 0M12 1.72c.394 0 .79.151 1.09.452l3.507 3.505l-4.566 4.568L7.433 5.65l3.478-3.478A1.53 1.53 0 0 1 12 1.72M5.691 7.395l4.593 4.593l-4.595 4.578l-3.494-3.498a1.54 1.54 0 0 1 0-2.18zm12.626.047l3.49 3.49a1.54 1.54 0 0 1 0 2.177l-8.714 8.715a1.54 1.54 0 0 1-2.18 0l-3.5-3.5Z"/></svg>

React

import type { SVGProps } from "react";

export function SimpleIconsYabai(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12.075 0a3.26 3.26 0 0 0-2.38.955L6.216 4.431l-.53-.529c-1.2-1.055-2.822.514-1.745 1.742l.531.531L.976 9.671a3.263 3.263 0 0 0 0 4.613L4.47 17.78l-.068.066l-.516.514c-1.07 1.206.472 2.816 1.707 1.775l.598-.594l3.502 3.502a3.263 3.263 0 0 0 4.615 0l8.714-8.714a3.263 3.263 0 0 0 0-4.615l.002-.002l-3.486-3.488l.58-.58a1.233 1.233 0 0 0-1.744-1.742l-.56.56L14.306.956A3.26 3.26 0 0 0 12.075 0M12 1.72c.394 0 .79.151 1.09.452l3.507 3.505l-4.566 4.568L7.433 5.65l3.478-3.478A1.53 1.53 0 0 1 12 1.72M5.691 7.395l4.593 4.593l-4.595 4.578l-3.494-3.498a1.54 1.54 0 0 1 0-2.18zm12.626.047l3.49 3.49a1.54 1.54 0 0 1 0 2.177l-8.714 8.715a1.54 1.54 0 0 1-2.18 0l-3.5-3.5Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12.075 0a3.26 3.26 0 0 0-2.38.955L6.216 4.431l-.53-.529c-1.2-1.055-2.822.514-1.745 1.742l.531.531L.976 9.671a3.263 3.263 0 0 0 0 4.613L4.47 17.78l-.068.066l-.516.514c-1.07 1.206.472 2.816 1.707 1.775l.598-.594l3.502 3.502a3.263 3.263 0 0 0 4.615 0l8.714-8.714a3.263 3.263 0 0 0 0-4.615l.002-.002l-3.486-3.488l.58-.58a1.233 1.233 0 0 0-1.744-1.742l-.56.56L14.306.956A3.26 3.26 0 0 0 12.075 0M12 1.72c.394 0 .79.151 1.09.452l3.507 3.505l-4.566 4.568L7.433 5.65l3.478-3.478A1.53 1.53 0 0 1 12 1.72M5.691 7.395l4.593 4.593l-4.595 4.578l-3.494-3.498a1.54 1.54 0 0 1 0-2.18zm12.626.047l3.49 3.49a1.54 1.54 0 0 1 0 2.177l-8.714 8.715a1.54 1.54 0 0 1-2.18 0l-3.5-3.5Z"/></svg>
</template>

CSS

.icon-yabai {
  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%22currentColor%22%20d%3D%22M12.075%200a3.26%203.26%200%200%200-2.38.955L6.216%204.431l-.53-.529c-1.2-1.055-2.822.514-1.745%201.742l.531.531L.976%209.671a3.263%203.263%200%200%200%200%204.613L4.47%2017.78l-.068.066l-.516.514c-1.07%201.206.472%202.816%201.707%201.775l.598-.594l3.502%203.502a3.263%203.263%200%200%200%204.615%200l8.714-8.714a3.263%203.263%200%200%200%200-4.615l.002-.002l-3.486-3.488l.58-.58a1.233%201.233%200%200%200-1.744-1.742l-.56.56L14.306.956A3.26%203.26%200%200%200%2012.075%200M12%201.72c.394%200%20.79.151%201.09.452l3.507%203.505l-4.566%204.568L7.433%205.65l3.478-3.478A1.53%201.53%200%200%201%2012%201.72M5.691%207.395l4.593%204.593l-4.595%204.578l-3.494-3.498a1.54%201.54%200%200%201%200-2.18zm12.626.047l3.49%203.49a1.54%201.54%200%200%201%200%202.177l-8.714%208.715a1.54%201.54%200%200%201-2.18%200l-3.5-3.5Z%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%22currentColor%22%20d%3D%22M12.075%200a3.26%203.26%200%200%200-2.38.955L6.216%204.431l-.53-.529c-1.2-1.055-2.822.514-1.745%201.742l.531.531L.976%209.671a3.263%203.263%200%200%200%200%204.613L4.47%2017.78l-.068.066l-.516.514c-1.07%201.206.472%202.816%201.707%201.775l.598-.594l3.502%203.502a3.263%203.263%200%200%200%204.615%200l8.714-8.714a3.263%203.263%200%200%200%200-4.615l.002-.002l-3.486-3.488l.58-.58a1.233%201.233%200%200%200-1.744-1.742l-.56.56L14.306.956A3.26%203.26%200%200%200%2012.075%200M12%201.72c.394%200%20.79.151%201.09.452l3.507%203.505l-4.566%204.568L7.433%205.65l3.478-3.478A1.53%201.53%200%200%201%2012%201.72M5.691%207.395l4.593%204.593l-4.595%204.578l-3.494-3.498a1.54%201.54%200%200%201%200-2.18zm12.626.047l3.49%203.49a1.54%201.54%200%200%201%200%202.177l-8.714%208.715a1.54%201.54%200%200%201-2.18%200l-3.5-3.5Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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