Home/Libraries/SVG Logos (Iconify)/headlessui-icon

SVG Logos (Iconify)

HeadlessuiIcon

License: CC0-1.0Commercial Safe

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" 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>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. HeadlessuiIconIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **CC0-1.0** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.