Headlessui icon
Download the Headlessui logo as free SVG or PNG. Customize its outline stroke. Copy React, Vue or Svelte code.
- headless-ui
- headlessui
- tailwind
- react
- vue
- components
- ui
- logo
- brand
- social
Size
Stroke
Color
- Category
- brand
- Styles
- Outline
- Component
- IconBrandHeadlessui
- License
- MIT · Paweł Kuna
outline/brand-headlessui.svgCode
Copy it the way you use it
brand-headlessui.svg
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M6.744 4.325l7.82 -1.267a4.456 4.456 0 0 1 5.111 3.686l1.267 7.82a4.456 4.456 0 0 1 -3.686 5.111l-7.82 1.267a4.456 4.456 0 0 1 -5.111 -3.686l-1.267 -7.82a4.456 4.456 0 0 1 3.686 -5.111" />
<path d="M7.252 7.704l7.897 -1.28a1 1 0 0 1 1.147 .828l.36 2.223l-9.562 3.51l-.67 -4.134a1 1 0 0 1 .828 -1.147" />
</svg>Use the Headlessui icon
For a decorative icon beside text, add aria-hidden="true" to the SVG. For an icon-only control, put its accessible name on the button or link.
React example
import { IconBrandHeadlessui } from '@tabler/icons-react';
<IconBrandHeadlessui size={24} stroke={2} />Vue example
import { IconBrandHeadlessui } from '@tabler/icons-vue';
<IconBrandHeadlessui :size="24" :stroke="2" />Svelte 5 example
import { IconBrandHeadlessui } from '@tabler/icons-svelte-runes';
<IconBrandHeadlessui size={24} stroke={2} />Related