headlessui logo
headlessui from Simple Icons by Simple Icons Collaborators · Brand · CC0-1.0 Free for personal and commercial use.
- Name
- headlessui
- Set
- Simple Icons
- Style
- Brand
- Viewbox
- 24×24
- License
- CC0 1.0
The same logo in other sets
Use the headlessui logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.477 13.192c-.36-2.274-.584-3.711-.65-4.805c-.062-1.035.051-1.354.1-1.468c.169-.395.424-.746.746-1.029c.093-.081.363-.288 1.366-.548c1.06-.275 2.496-.507 4.769-.867s3.71-.584 4.804-.65c1.034-.062 1.354.051 1.468.1c.395.169.746.424 1.029.747c.08.093.287.362.547 1.366c.242.933.45 2.156.743 3.987l-14.646 4.89c-.085-.515-.176-1.085-.276-1.723m-3.762.596C.018 9.387-.33 7.187.425 5.422a6.7 6.7 0 0 1 1.743-2.401C3.614 1.757 5.813 1.41 10.211.713c4.4-.698 6.6-1.046 8.367-.291c.92.393 1.74.99 2.399 1.743c1.264 1.447 1.612 3.647 2.308 8.047c.697 4.4 1.045 6.601.29 8.366a6.7 6.7 0 0 1-1.743 2.402c-1.445 1.263-3.645 1.611-8.045 2.308c-4.398.697-6.598 1.045-8.363.29a6.7 6.7 0 0 1-2.4-1.743c-1.263-1.448-1.611-3.648-2.308-8.048zm7.759 7.814c1.178-.072 2.695-.31 4.94-.665c2.247-.356 3.762-.599 4.905-.895c1.107-.288 1.617-.568 1.947-.856a4.3 4.3 0 0 0 1.12-1.543c.172-.402.281-.974.212-2.116c-.071-1.178-.309-2.696-.665-4.942c-.355-2.247-.598-3.763-.894-4.906c-.287-1.107-.568-1.618-.855-1.947a4.3 4.3 0 0 0-1.543-1.12c-.402-.174-.974-.282-2.116-.213c-1.178.071-2.694.309-4.94.664c-2.246.357-3.762.6-4.905.896c-1.107.287-1.616.568-1.946.855a4.3 4.3 0 0 0-1.12 1.543c-.173.403-.281.974-.212 2.116c.07 1.179.308 2.696.664 4.943s.598 3.762.895 4.905c.287 1.108.567 1.618.855 1.947c.423.485.95.868 1.543 1.121c.402.173.973.282 2.116.213Z"/></svg>
React
import type { SVGProps } from "react";
export function SimpleIconsHeadlessui(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="M4.477 13.192c-.36-2.274-.584-3.711-.65-4.805c-.062-1.035.051-1.354.1-1.468c.169-.395.424-.746.746-1.029c.093-.081.363-.288 1.366-.548c1.06-.275 2.496-.507 4.769-.867s3.71-.584 4.804-.65c1.034-.062 1.354.051 1.468.1c.395.169.746.424 1.029.747c.08.093.287.362.547 1.366c.242.933.45 2.156.743 3.987l-14.646 4.89c-.085-.515-.176-1.085-.276-1.723m-3.762.596C.018 9.387-.33 7.187.425 5.422a6.7 6.7 0 0 1 1.743-2.401C3.614 1.757 5.813 1.41 10.211.713c4.4-.698 6.6-1.046 8.367-.291c.92.393 1.74.99 2.399 1.743c1.264 1.447 1.612 3.647 2.308 8.047c.697 4.4 1.045 6.601.29 8.366a6.7 6.7 0 0 1-1.743 2.402c-1.445 1.263-3.645 1.611-8.045 2.308c-4.398.697-6.598 1.045-8.363.29a6.7 6.7 0 0 1-2.4-1.743c-1.263-1.448-1.611-3.648-2.308-8.048zm7.759 7.814c1.178-.072 2.695-.31 4.94-.665c2.247-.356 3.762-.599 4.905-.895c1.107-.288 1.617-.568 1.947-.856a4.3 4.3 0 0 0 1.12-1.543c.172-.402.281-.974.212-2.116c-.071-1.178-.309-2.696-.665-4.942c-.355-2.247-.598-3.763-.894-4.906c-.287-1.107-.568-1.618-.855-1.947a4.3 4.3 0 0 0-1.543-1.12c-.402-.174-.974-.282-2.116-.213c-1.178.071-2.694.309-4.94.664c-2.246.357-3.762.6-4.905.896c-1.107.287-1.616.568-1.946.855a4.3 4.3 0 0 0-1.12 1.543c-.173.403-.281.974-.212 2.116c.07 1.179.308 2.696.664 4.943s.598 3.762.895 4.905c.287 1.108.567 1.618.855 1.947c.423.485.95.868 1.543 1.121c.402.173.973.282 2.116.213Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.477 13.192c-.36-2.274-.584-3.711-.65-4.805c-.062-1.035.051-1.354.1-1.468c.169-.395.424-.746.746-1.029c.093-.081.363-.288 1.366-.548c1.06-.275 2.496-.507 4.769-.867s3.71-.584 4.804-.65c1.034-.062 1.354.051 1.468.1c.395.169.746.424 1.029.747c.08.093.287.362.547 1.366c.242.933.45 2.156.743 3.987l-14.646 4.89c-.085-.515-.176-1.085-.276-1.723m-3.762.596C.018 9.387-.33 7.187.425 5.422a6.7 6.7 0 0 1 1.743-2.401C3.614 1.757 5.813 1.41 10.211.713c4.4-.698 6.6-1.046 8.367-.291c.92.393 1.74.99 2.399 1.743c1.264 1.447 1.612 3.647 2.308 8.047c.697 4.4 1.045 6.601.29 8.366a6.7 6.7 0 0 1-1.743 2.402c-1.445 1.263-3.645 1.611-8.045 2.308c-4.398.697-6.598 1.045-8.363.29a6.7 6.7 0 0 1-2.4-1.743c-1.263-1.448-1.611-3.648-2.308-8.048zm7.759 7.814c1.178-.072 2.695-.31 4.94-.665c2.247-.356 3.762-.599 4.905-.895c1.107-.288 1.617-.568 1.947-.856a4.3 4.3 0 0 0 1.12-1.543c.172-.402.281-.974.212-2.116c-.071-1.178-.309-2.696-.665-4.942c-.355-2.247-.598-3.763-.894-4.906c-.287-1.107-.568-1.618-.855-1.947a4.3 4.3 0 0 0-1.543-1.12c-.402-.174-.974-.282-2.116-.213c-1.178.071-2.694.309-4.94.664c-2.246.357-3.762.6-4.905.896c-1.107.287-1.616.568-1.946.855a4.3 4.3 0 0 0-1.12 1.543c-.173.403-.281.974-.212 2.116c.07 1.179.308 2.696.664 4.943s.598 3.762.895 4.905c.287 1.108.567 1.618.855 1.947c.423.485.95.868 1.543 1.121c.402.173.973.282 2.116.213Z"/></svg> </template>
CSS
.icon-headlessui {
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%22M4.477%2013.192c-.36-2.274-.584-3.711-.65-4.805c-.062-1.035.051-1.354.1-1.468c.169-.395.424-.746.746-1.029c.093-.081.363-.288%201.366-.548c1.06-.275%202.496-.507%204.769-.867s3.71-.584%204.804-.65c1.034-.062%201.354.051%201.468.1c.395.169.746.424%201.029.747c.08.093.287.362.547%201.366c.242.933.45%202.156.743%203.987l-14.646%204.89c-.085-.515-.176-1.085-.276-1.723m-3.762.596C.018%209.387-.33%207.187.425%205.422a6.7%206.7%200%200%201%201.743-2.401C3.614%201.757%205.813%201.41%2010.211.713c4.4-.698%206.6-1.046%208.367-.291c.92.393%201.74.99%202.399%201.743c1.264%201.447%201.612%203.647%202.308%208.047c.697%204.4%201.045%206.601.29%208.366a6.7%206.7%200%200%201-1.743%202.402c-1.445%201.263-3.645%201.611-8.045%202.308c-4.398.697-6.598%201.045-8.363.29a6.7%206.7%200%200%201-2.4-1.743c-1.263-1.448-1.611-3.648-2.308-8.048zm7.759%207.814c1.178-.072%202.695-.31%204.94-.665c2.247-.356%203.762-.599%204.905-.895c1.107-.288%201.617-.568%201.947-.856a4.3%204.3%200%200%200%201.12-1.543c.172-.402.281-.974.212-2.116c-.071-1.178-.309-2.696-.665-4.942c-.355-2.247-.598-3.763-.894-4.906c-.287-1.107-.568-1.618-.855-1.947a4.3%204.3%200%200%200-1.543-1.12c-.402-.174-.974-.282-2.116-.213c-1.178.071-2.694.309-4.94.664c-2.246.357-3.762.6-4.905.896c-1.107.287-1.616.568-1.946.855a4.3%204.3%200%200%200-1.12%201.543c-.173.403-.281.974-.212%202.116c.07%201.179.308%202.696.664%204.943s.598%203.762.895%204.905c.287%201.108.567%201.618.855%201.947c.423.485.95.868%201.543%201.121c.402.173.973.282%202.116.213Z%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%22M4.477%2013.192c-.36-2.274-.584-3.711-.65-4.805c-.062-1.035.051-1.354.1-1.468c.169-.395.424-.746.746-1.029c.093-.081.363-.288%201.366-.548c1.06-.275%202.496-.507%204.769-.867s3.71-.584%204.804-.65c1.034-.062%201.354.051%201.468.1c.395.169.746.424%201.029.747c.08.093.287.362.547%201.366c.242.933.45%202.156.743%203.987l-14.646%204.89c-.085-.515-.176-1.085-.276-1.723m-3.762.596C.018%209.387-.33%207.187.425%205.422a6.7%206.7%200%200%201%201.743-2.401C3.614%201.757%205.813%201.41%2010.211.713c4.4-.698%206.6-1.046%208.367-.291c.92.393%201.74.99%202.399%201.743c1.264%201.447%201.612%203.647%202.308%208.047c.697%204.4%201.045%206.601.29%208.366a6.7%206.7%200%200%201-1.743%202.402c-1.445%201.263-3.645%201.611-8.045%202.308c-4.398.697-6.598%201.045-8.363.29a6.7%206.7%200%200%201-2.4-1.743c-1.263-1.448-1.611-3.648-2.308-8.048zm7.759%207.814c1.178-.072%202.695-.31%204.94-.665c2.247-.356%203.762-.599%204.905-.895c1.107-.288%201.617-.568%201.947-.856a4.3%204.3%200%200%200%201.12-1.543c.172-.402.281-.974.212-2.116c-.071-1.178-.309-2.696-.665-4.942c-.355-2.247-.598-3.763-.894-4.906c-.287-1.107-.568-1.618-.855-1.947a4.3%204.3%200%200%200-1.543-1.12c-.402-.174-.974-.282-2.116-.213c-1.178.071-2.694.309-4.94.664c-2.246.357-3.762.6-4.905.896c-1.107.287-1.616.568-1.946.855a4.3%204.3%200%200%200-1.12%201.543c-.173.403-.281.974-.212%202.116c.07%201.179.308%202.696.664%204.943s.598%203.762.895%204.905c.287%201.108.567%201.618.855%201.947c.423.485.95.868%201.543%201.121c.402.173.973.282%202.116.213Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/simple-icons/headlessui.svg?color=%231a73e8&size=48
