Headlessui icon

logos:headlessui

The Headlessui icon (logos:headlessui) is a free SVG icon from the SVG Logos set by Gil Barbara. It is drawn on a 512 × 90 grid. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: SVG Logos
Author: Gil Barbara
License: CC0-1.0
Size: 512 × 90

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="90" viewBox="0 0 512 90"><defs><linearGradient id="SVGrDNsucjF" x1="35.871%" x2="60.314%" y1="7.202%" y2="116.022%"><stop offset="0%" stop-color="#66e3ff"/><stop offset="100%" stop-color="#7064f9"/></linearGradient><linearGradient id="SVGbljQqcUJ" x1="39.177%" x2="55.048%" y1="0%" y2="99.181%"><stop offset="0%" stop-color="#66e3ff"/><stop offset="100%" stop-color="#7064f9"/></linearGradient></defs><path fill="#111827" d="M138.845 29.13c-5.555 0-9.965 2.042-12.66 6.29V13.85h-8.82v57.187h8.82V49.145c0-8.333 4.573-11.764 10.37-11.764c5.555 0 9.15 3.266 9.15 9.475v24.182h8.818v-25.08c0-10.62-6.531-16.829-15.678-16.829m42.41 0c12.17 0 20.5 9.802 20.5 21.565c0 .92-.093 1.884-.208 2.792l-.12.885h-32.504c1.388 6.372 6.534 9.64 13.068 9.64c4.654 0 8.205-1.99 10.228-4.64l.307-.425l7.267 4.248c-3.755 5.555-9.883 8.904-17.886 8.904c-13.474 0-22.213-9.229-22.213-21.485c0-12.091 8.74-21.485 21.56-21.485m-.082 8.005c-6.394 0-10.807 3.663-12.2 9.44l-.134.606h24.011c-1.225-7.024-6.368-10.046-11.677-10.046m44.109-8.006c6.095 0 10.766 2.392 13.879 6.317l.414.545V30.19h8.82v40.848h-8.82v-5.881c-3.103 4.328-7.921 6.942-14.293 6.942c-11.106 0-20.335-9.396-20.335-21.485c0-12.172 9.226-21.485 20.335-21.485m1.388 8.415c-7.348 0-12.903 5.473-12.903 13.07c0 7.386 5.25 12.768 12.295 13.06l.608.014c7.35-.003 12.905-5.477 12.905-13.074s-5.554-13.07-12.905-13.07m71.125-23.693v57.187h-8.82v-5.881c-3.103 4.328-7.921 6.942-14.293 6.942c-11.106 0-20.335-9.396-20.335-21.485c0-12.172 9.229-21.485 20.335-21.485c6.095 0 10.768 2.392 13.879 6.317l.414.545V13.85zm-21.722 23.693c-7.351 0-12.906 5.473-12.906 13.07c0 7.386 5.25 12.768 12.297 13.06l.609.014c7.348-.003 12.902-5.477 12.902-13.074s-5.554-13.07-12.902-13.07m29.96 33.494h8.823V11.403h-8.823zM342.33 29.13c12.17 0 20.5 9.803 20.5 21.566c0 .92-.093 1.884-.208 2.792l-.12.885h-32.504c1.388 6.372 6.534 9.64 13.065 9.64c4.658 0 8.206-1.99 10.23-4.64l.306-.425l7.27 4.248c-3.759 5.555-9.884 8.904-17.887 8.904c-13.473 0-22.212-9.229-22.212-21.485c0-12.091 8.739-21.485 21.56-21.485m-.08 8.006c-6.395 0-10.808 3.663-12.202 9.44l-.134.606h24.012c-1.226-7.024-6.369-10.046-11.677-10.046m32.624 4.329c0-2.938 2.778-4.329 5.963-4.329c3.35 0 6.206 1.47 7.678 4.656l7.432-4.166c-2.86-5.392-8.414-8.496-15.11-8.496c-8.33 0-14.946 4.819-14.946 12.5c0 7.443 5.694 10.04 11.284 11.753l1.786.526l2.297.657l1.083.329c3.166 1 5.52 2.164 5.52 4.543c0 3.268-3.023 4.575-6.943 4.575c-4.491 0-7.757-2.205-9.064-5.882l-7.597 4.41c2.614 5.882 8.496 9.559 16.66 9.559c8.82 0 15.928-4.41 15.928-12.58c0-7.286-5.107-10.015-10.397-11.72l-1.177-.364l-3.992-1.132l-1.055-.32c-2.91-.918-5.096-2.001-5.33-4.132zm33.13 0c0-2.938 2.78-4.329 5.964-4.329c3.346 0 6.206 1.47 7.675 4.656l7.432-4.166c-2.857-5.392-8.411-8.496-15.107-8.496c-8.33 0-14.946 4.819-14.946 12.5c0 7.443 5.694 10.04 11.284 11.753l1.787.526l2.296.657l1.083.329c3.166 1 5.52 2.164 5.52 4.543c0 3.268-3.023 4.575-6.943 4.575c-4.491 0-7.76-2.205-9.066-5.882l-7.595 4.41c2.614 5.882 8.493 9.559 16.66 9.559c8.82 0 15.926-4.41 15.926-12.58c0-7.286-5.107-10.015-10.397-11.72l-1.176-.364l-3.991-1.132l-1.055-.32l-.995-.332c-2.402-.855-4.128-1.92-4.335-3.8zm86.964-27.259a17.033 17.033 0 0 1 17.015 16.244l.018.795v28.393a17.033 17.033 0 0 1-16.238 17.018l-.795.018h-28.385a17.033 17.033 0 0 1-17.012-16.24l-.018-.796V31.242a17.033 17.033 0 0 1 16.235-17.017l.795-.019zm0 5.678l-28.385.003c-6.27.001-11.354 5.084-11.355 11.355v28.396c.001 6.271 5.084 11.354 11.355 11.356h28.385c6.27-.002 11.354-5.085 11.355-11.356V31.245a11.36 11.36 0 0 0-11.355-11.361M470.11 33.232v18.286c0 2.703 1.433 4.729 5.169 4.729c3.558 0 5.024-1.838 5.156-4.348l.01-.381V33.234h5.484v18.72c0 5.81-4.243 9.424-10.063 9.651l-.587.012c-5.885-.003-10.317-3.428-10.597-9.089l-.014-.573V33.232zm27.037 0v27.825h-5.485V33.232z"/><path fill="url(#SVGrDNsucjF)" d="m17.726 55.637l54.621-18.239c-1.09-6.828-1.869-11.389-2.77-14.87c-.97-3.744-1.74-4.745-2.043-5.092a10.65 10.65 0 0 0-3.836-2.787c-.425-.182-1.617-.605-5.473-.373c-4.08.247-9.436 1.08-17.917 2.424c-8.479 1.343-13.832 2.207-17.786 3.232c-3.741.97-4.746 1.743-5.093 2.045a10.7 10.7 0 0 0-2.784 3.836c-.182.426-.604 1.618-.372 5.477c.246 4.08 1.08 9.438 2.423 17.92c.375 2.378.714 4.505 1.03 6.427"/><path fill="url(#SVGbljQqcUJ)" d="M2.666 51.431c-2.597-16.409-3.898-24.613-1.083-31.2a24.9 24.9 0 0 1 6.503-8.954c5.392-4.71 13.594-6.008 29.997-8.608c16.409-2.602 24.61-3.9 31.2-1.085a24.85 24.85 0 0 1 8.95 6.503c4.711 5.395 6.01 13.6 8.606 30.01c2.6 16.41 3.898 24.617 1.083 31.201a24.86 24.86 0 0 1-6.5 8.954c-5.392 4.713-13.597 6.01-30.003 8.61c-16.403 2.6-24.607 3.898-31.191 1.083a24.86 24.86 0 0 1-8.95-6.503c-4.711-5.395-6.01-13.6-8.61-30.01zm28.936 29.141c4.394-.266 10.052-1.153 18.427-2.48c8.378-1.326 14.027-2.232 18.292-3.337c4.127-1.072 6.03-2.116 7.258-3.19a16 16 0 0 0 4.178-5.756c.644-1.5 1.05-3.633.792-7.891c-.266-4.394-1.153-10.054-2.48-18.432s-2.23-14.034-3.335-18.295c-1.071-4.13-2.118-6.033-3.19-7.262a16 16 0 0 0-5.753-4.18c-1.5-.644-3.632-1.05-7.89-.792c-4.394.266-10.05 1.153-18.427 2.48c-8.375 1.328-14.028 2.232-18.29 3.337c-4.13 1.072-6.03 2.119-7.258 3.19a16 16 0 0 0-4.18 5.756c-.641 1.5-1.047 3.632-.79 7.891c.266 4.396 1.15 10.054 2.48 18.432c1.326 8.378 2.23 14.033 3.335 18.295c1.072 4.13 2.115 6.033 3.19 7.262a16 16 0 0 0 5.753 4.18c1.5.644 3.63 1.05 7.891.792z"/></svg>

How to use the Headlessui icon

React

import { Icon } from "@iconify/react";

<Icon icon="logos:headlessui" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="logos:headlessui" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="logos:headlessui" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--headlessui]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:headlessui"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="logos:headlessui"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/logos/headlessui.svg" alt="Headlessui icon" width="24" height="24">

Related icons in SVG Logos

Headlessui icon in other icon sets

Headlessui icon FAQ

Is the Headlessui icon free for commercial use?

Yes. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects.

How do I use the Headlessui icon in React?

Install @iconify/react and render <Icon icon="logos:headlessui" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Headlessui icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/logos/headlessui.svg" alt="Headlessui icon">, or paste the SVG code inline to style it with CSS.

Browse all SVG Logos icons →