headlessui icon logo

headlessui-icon from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.

Name
headlessui-icon
Set
SVG Logos
Style
Color
Viewbox
256×256
License
CC0

Use the headlessui icon logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><defs><linearGradient id="SVGno1JGHlx" x1="35.871%" x2="60.314%" y1="7.224%" y2="115.988%"><stop offset="0%" stop-color="#66e3ff"/><stop offset="100%" stop-color="#7064f9"/></linearGradient><linearGradient id="SVGHMrgPdGo" x1="39.172%" x2="55.05%" y1="0%" y2="99.181%"><stop offset="0%" stop-color="#66e3ff"/><stop offset="100%" stop-color="#7064f9"/></linearGradient></defs><path fill="url(#SVGno1JGHlx)" d="m50.699 159.089l156.225-52.153c-3.122-19.523-5.346-32.565-7.924-42.518c-2.777-10.706-4.978-13.57-5.842-14.563a30.5 30.5 0 0 0-10.973-7.969c-1.216-.52-4.625-1.728-15.654-1.064c-11.669.704-26.987 3.088-51.245 6.929c-24.25 3.84-39.56 6.313-50.87 9.241c-10.7 2.777-13.573 4.985-14.566 5.85a30.6 30.6 0 0 0-7.963 10.97c-.52 1.215-1.729 4.624-1.064 15.658c.704 11.665 3.089 26.988 6.93 51.24c1.073 6.8 2.041 12.882 2.946 18.379"/><path fill="url(#SVGHMrgPdGo)" d="M7.625 147.063c-7.427-46.92-11.149-70.38-3.098-89.214a71.1 71.1 0 0 1 18.6-25.605c15.423-13.466 38.88-17.178 85.796-24.611C155.854.19 179.313-3.521 198.16 4.528a71.1 71.1 0 0 1 25.595 18.595c13.477 15.426 17.19 38.886 24.618 85.814c7.435 46.92 11.149 70.387 3.097 89.214a71.1 71.1 0 0 1-18.591 25.604c-15.423 13.474-38.889 17.187-85.812 24.62c-46.916 7.433-70.382 11.146-89.213 3.096a71.1 71.1 0 0 1-25.595-18.595C18.781 217.45 15.068 193.99 7.633 147.063zm82.762 83.325c12.565-.76 28.748-3.296 52.702-7.09c23.962-3.792 40.12-6.384 52.318-9.545c11.805-3.064 17.247-6.049 20.76-9.121a45.7 45.7 0 0 0 11.95-16.459c1.84-4.288 3-10.385 2.264-22.563c-.76-12.562-3.297-28.749-7.09-52.705c-3.794-23.955-6.38-40.126-9.54-52.312c-3.066-11.81-6.059-17.25-9.124-20.763a45.7 45.7 0 0 0-16.455-11.954c-4.29-1.84-10.388-3-22.57-2.265c-12.565.76-28.74 3.297-52.701 7.09c-23.954 3.8-40.121 6.385-52.31 9.545c-11.813 3.065-17.247 6.057-20.76 9.122a45.7 45.7 0 0 0-11.958 16.458c-1.833 4.289-2.993 10.386-2.257 22.564c.76 12.57 3.29 28.748 7.091 52.704c3.794 23.956 6.379 40.127 9.54 52.313c3.065 11.81 6.05 17.25 9.124 20.763a45.7 45.7 0 0 0 16.455 11.954c4.29 1.84 10.38 3 22.57 2.264z"/></svg>

React

import type { SVGProps } from "react";

export function LogosHeadlessuiIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><defs><linearGradient id="SVGno1JGHlx" x1="35.871%" x2="60.314%" y1="7.224%" y2="115.988%"><stop offset="0%" stopColor="#66e3ff"/><stop offset="100%" stopColor="#7064f9"/></linearGradient><linearGradient id="SVGHMrgPdGo" x1="39.172%" x2="55.05%" y1="0%" y2="99.181%"><stop offset="0%" stopColor="#66e3ff"/><stop offset="100%" stopColor="#7064f9"/></linearGradient></defs><path fill="url(#SVGno1JGHlx)" d="m50.699 159.089l156.225-52.153c-3.122-19.523-5.346-32.565-7.924-42.518c-2.777-10.706-4.978-13.57-5.842-14.563a30.5 30.5 0 0 0-10.973-7.969c-1.216-.52-4.625-1.728-15.654-1.064c-11.669.704-26.987 3.088-51.245 6.929c-24.25 3.84-39.56 6.313-50.87 9.241c-10.7 2.777-13.573 4.985-14.566 5.85a30.6 30.6 0 0 0-7.963 10.97c-.52 1.215-1.729 4.624-1.064 15.658c.704 11.665 3.089 26.988 6.93 51.24c1.073 6.8 2.041 12.882 2.946 18.379"/><path fill="url(#SVGHMrgPdGo)" d="M7.625 147.063c-7.427-46.92-11.149-70.38-3.098-89.214a71.1 71.1 0 0 1 18.6-25.605c15.423-13.466 38.88-17.178 85.796-24.611C155.854.19 179.313-3.521 198.16 4.528a71.1 71.1 0 0 1 25.595 18.595c13.477 15.426 17.19 38.886 24.618 85.814c7.435 46.92 11.149 70.387 3.097 89.214a71.1 71.1 0 0 1-18.591 25.604c-15.423 13.474-38.889 17.187-85.812 24.62c-46.916 7.433-70.382 11.146-89.213 3.096a71.1 71.1 0 0 1-25.595-18.595C18.781 217.45 15.068 193.99 7.633 147.063zm82.762 83.325c12.565-.76 28.748-3.296 52.702-7.09c23.962-3.792 40.12-6.384 52.318-9.545c11.805-3.064 17.247-6.049 20.76-9.121a45.7 45.7 0 0 0 11.95-16.459c1.84-4.288 3-10.385 2.264-22.563c-.76-12.562-3.297-28.749-7.09-52.705c-3.794-23.955-6.38-40.126-9.54-52.312c-3.066-11.81-6.059-17.25-9.124-20.763a45.7 45.7 0 0 0-16.455-11.954c-4.29-1.84-10.388-3-22.57-2.265c-12.565.76-28.74 3.297-52.701 7.09c-23.954 3.8-40.121 6.385-52.31 9.545c-11.813 3.065-17.247 6.057-20.76 9.122a45.7 45.7 0 0 0-11.958 16.458c-1.833 4.289-2.993 10.386-2.257 22.564c.76 12.57 3.29 28.748 7.091 52.704c3.794 23.956 6.379 40.127 9.54 52.313c3.065 11.81 6.05 17.25 9.124 20.763a45.7 45.7 0 0 0 16.455 11.954c4.29 1.84 10.38 3 22.57 2.264z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><defs><linearGradient id="SVGno1JGHlx" x1="35.871%" x2="60.314%" y1="7.224%" y2="115.988%"><stop offset="0%" stop-color="#66e3ff"/><stop offset="100%" stop-color="#7064f9"/></linearGradient><linearGradient id="SVGHMrgPdGo" x1="39.172%" x2="55.05%" y1="0%" y2="99.181%"><stop offset="0%" stop-color="#66e3ff"/><stop offset="100%" stop-color="#7064f9"/></linearGradient></defs><path fill="url(#SVGno1JGHlx)" d="m50.699 159.089l156.225-52.153c-3.122-19.523-5.346-32.565-7.924-42.518c-2.777-10.706-4.978-13.57-5.842-14.563a30.5 30.5 0 0 0-10.973-7.969c-1.216-.52-4.625-1.728-15.654-1.064c-11.669.704-26.987 3.088-51.245 6.929c-24.25 3.84-39.56 6.313-50.87 9.241c-10.7 2.777-13.573 4.985-14.566 5.85a30.6 30.6 0 0 0-7.963 10.97c-.52 1.215-1.729 4.624-1.064 15.658c.704 11.665 3.089 26.988 6.93 51.24c1.073 6.8 2.041 12.882 2.946 18.379"/><path fill="url(#SVGHMrgPdGo)" d="M7.625 147.063c-7.427-46.92-11.149-70.38-3.098-89.214a71.1 71.1 0 0 1 18.6-25.605c15.423-13.466 38.88-17.178 85.796-24.611C155.854.19 179.313-3.521 198.16 4.528a71.1 71.1 0 0 1 25.595 18.595c13.477 15.426 17.19 38.886 24.618 85.814c7.435 46.92 11.149 70.387 3.097 89.214a71.1 71.1 0 0 1-18.591 25.604c-15.423 13.474-38.889 17.187-85.812 24.62c-46.916 7.433-70.382 11.146-89.213 3.096a71.1 71.1 0 0 1-25.595-18.595C18.781 217.45 15.068 193.99 7.633 147.063zm82.762 83.325c12.565-.76 28.748-3.296 52.702-7.09c23.962-3.792 40.12-6.384 52.318-9.545c11.805-3.064 17.247-6.049 20.76-9.121a45.7 45.7 0 0 0 11.95-16.459c1.84-4.288 3-10.385 2.264-22.563c-.76-12.562-3.297-28.749-7.09-52.705c-3.794-23.955-6.38-40.126-9.54-52.312c-3.066-11.81-6.059-17.25-9.124-20.763a45.7 45.7 0 0 0-16.455-11.954c-4.29-1.84-10.388-3-22.57-2.265c-12.565.76-28.74 3.297-52.701 7.09c-23.954 3.8-40.121 6.385-52.31 9.545c-11.813 3.065-17.247 6.057-20.76 9.122a45.7 45.7 0 0 0-11.958 16.458c-1.833 4.289-2.993 10.386-2.257 22.564c.76 12.57 3.29 28.748 7.091 52.704c3.794 23.956 6.379 40.127 9.54 52.313c3.065 11.81 6.05 17.25 9.124 20.763a45.7 45.7 0 0 0 16.455 11.954c4.29 1.84 10.38 3 22.57 2.264z"/></svg>
</template>

CSS

.icon-headlessui-icon {
  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%20256%20256%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGno1JGHlx%22%20x1%3D%2235.871%25%22%20x2%3D%2260.314%25%22%20y1%3D%227.224%25%22%20y2%3D%22115.988%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2366e3ff%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%237064f9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGHMrgPdGo%22%20x1%3D%2239.172%25%22%20x2%3D%2255.05%25%22%20y1%3D%220%25%22%20y2%3D%2299.181%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2366e3ff%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%237064f9%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGno1JGHlx)%22%20d%3D%22m50.699%20159.089l156.225-52.153c-3.122-19.523-5.346-32.565-7.924-42.518c-2.777-10.706-4.978-13.57-5.842-14.563a30.5%2030.5%200%200%200-10.973-7.969c-1.216-.52-4.625-1.728-15.654-1.064c-11.669.704-26.987%203.088-51.245%206.929c-24.25%203.84-39.56%206.313-50.87%209.241c-10.7%202.777-13.573%204.985-14.566%205.85a30.6%2030.6%200%200%200-7.963%2010.97c-.52%201.215-1.729%204.624-1.064%2015.658c.704%2011.665%203.089%2026.988%206.93%2051.24c1.073%206.8%202.041%2012.882%202.946%2018.379%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGHMrgPdGo)%22%20d%3D%22M7.625%20147.063c-7.427-46.92-11.149-70.38-3.098-89.214a71.1%2071.1%200%200%201%2018.6-25.605c15.423-13.466%2038.88-17.178%2085.796-24.611C155.854.19%20179.313-3.521%20198.16%204.528a71.1%2071.1%200%200%201%2025.595%2018.595c13.477%2015.426%2017.19%2038.886%2024.618%2085.814c7.435%2046.92%2011.149%2070.387%203.097%2089.214a71.1%2071.1%200%200%201-18.591%2025.604c-15.423%2013.474-38.889%2017.187-85.812%2024.62c-46.916%207.433-70.382%2011.146-89.213%203.096a71.1%2071.1%200%200%201-25.595-18.595C18.781%20217.45%2015.068%20193.99%207.633%20147.063zm82.762%2083.325c12.565-.76%2028.748-3.296%2052.702-7.09c23.962-3.792%2040.12-6.384%2052.318-9.545c11.805-3.064%2017.247-6.049%2020.76-9.121a45.7%2045.7%200%200%200%2011.95-16.459c1.84-4.288%203-10.385%202.264-22.563c-.76-12.562-3.297-28.749-7.09-52.705c-3.794-23.955-6.38-40.126-9.54-52.312c-3.066-11.81-6.059-17.25-9.124-20.763a45.7%2045.7%200%200%200-16.455-11.954c-4.29-1.84-10.388-3-22.57-2.265c-12.565.76-28.74%203.297-52.701%207.09c-23.954%203.8-40.121%206.385-52.31%209.545c-11.813%203.065-17.247%206.057-20.76%209.122a45.7%2045.7%200%200%200-11.958%2016.458c-1.833%204.289-2.993%2010.386-2.257%2022.564c.76%2012.57%203.29%2028.748%207.091%2052.704c3.794%2023.956%206.379%2040.127%209.54%2052.313c3.065%2011.81%206.05%2017.25%209.124%2020.763a45.7%2045.7%200%200%200%2016.455%2011.954c4.29%201.84%2010.38%203%2022.57%202.264z%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%20256%20256%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGno1JGHlx%22%20x1%3D%2235.871%25%22%20x2%3D%2260.314%25%22%20y1%3D%227.224%25%22%20y2%3D%22115.988%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2366e3ff%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%237064f9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGHMrgPdGo%22%20x1%3D%2239.172%25%22%20x2%3D%2255.05%25%22%20y1%3D%220%25%22%20y2%3D%2299.181%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2366e3ff%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%237064f9%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGno1JGHlx)%22%20d%3D%22m50.699%20159.089l156.225-52.153c-3.122-19.523-5.346-32.565-7.924-42.518c-2.777-10.706-4.978-13.57-5.842-14.563a30.5%2030.5%200%200%200-10.973-7.969c-1.216-.52-4.625-1.728-15.654-1.064c-11.669.704-26.987%203.088-51.245%206.929c-24.25%203.84-39.56%206.313-50.87%209.241c-10.7%202.777-13.573%204.985-14.566%205.85a30.6%2030.6%200%200%200-7.963%2010.97c-.52%201.215-1.729%204.624-1.064%2015.658c.704%2011.665%203.089%2026.988%206.93%2051.24c1.073%206.8%202.041%2012.882%202.946%2018.379%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGHMrgPdGo)%22%20d%3D%22M7.625%20147.063c-7.427-46.92-11.149-70.38-3.098-89.214a71.1%2071.1%200%200%201%2018.6-25.605c15.423-13.466%2038.88-17.178%2085.796-24.611C155.854.19%20179.313-3.521%20198.16%204.528a71.1%2071.1%200%200%201%2025.595%2018.595c13.477%2015.426%2017.19%2038.886%2024.618%2085.814c7.435%2046.92%2011.149%2070.387%203.097%2089.214a71.1%2071.1%200%200%201-18.591%2025.604c-15.423%2013.474-38.889%2017.187-85.812%2024.62c-46.916%207.433-70.382%2011.146-89.213%203.096a71.1%2071.1%200%200%201-25.595-18.595C18.781%20217.45%2015.068%20193.99%207.633%20147.063zm82.762%2083.325c12.565-.76%2028.748-3.296%2052.702-7.09c23.962-3.792%2040.12-6.384%2052.318-9.545c11.805-3.064%2017.247-6.049%2020.76-9.121a45.7%2045.7%200%200%200%2011.95-16.459c1.84-4.288%203-10.385%202.264-22.563c-.76-12.562-3.297-28.749-7.09-52.705c-3.794-23.955-6.38-40.126-9.54-52.312c-3.066-11.81-6.059-17.25-9.124-20.763a45.7%2045.7%200%200%200-16.455-11.954c-4.29-1.84-10.388-3-22.57-2.265c-12.565.76-28.74%203.297-52.701%207.09c-23.954%203.8-40.121%206.385-52.31%209.545c-11.813%203.065-17.247%206.057-20.76%209.122a45.7%2045.7%200%200%200-11.958%2016.458c-1.833%204.289-2.993%2010.386-2.257%2022.564c.76%2012.57%203.29%2028.748%207.091%2052.704c3.794%2023.956%206.379%2040.127%209.54%2052.313c3.065%2011.81%206.05%2017.25%209.124%2020.763a45.7%2045.7%200%200%200%2016.455%2011.954c4.29%201.84%2010.38%203%2022.57%202.264z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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