IconSearch logoIconsearch
Home/Libraries/Typicons (Iconify)/spanner-outline
← Back to Search
Typicons (Iconify)

SpannerOutline

License: CC-BY-SA-4.0


<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"><circle cx="8" cy="16" r="1" fill="#818cf8"/><path fill="#818cf8" d="M20.733 4.657a.997.997 0 0 0-1.399.009a.997.997 0 0 0 .01-1.4A6.47 6.47 0 0 0 15.5 2A6.5 6.5 0 0 0 9 8.5l.031.379c-.337.239-2.893 2.147-4.258 3.301C3.638 13.17 3 14.555 3 16c0 2.757 2.243 5 5 5c1.465 0 2.854-.65 3.811-1.784c1.173-1.375 3.08-3.923 3.317-4.229L15.5 15A6.5 6.5 0 0 0 22 8.5c0-1.44-.474-2.766-1.267-3.843M8 19a3 3 0 0 1-3-3c0-.92.423-1.732 1.064-2.292c2.368-2.002 3.617-2.748 5.115-4.015A4.5 4.5 0 0 1 11 8.5A4.5 4.5 0 0 1 15.5 4c.47 0 .914.092 1.339.226L14 7l.5 2.5l2.5.5l2.805-2.741c.115.396.195.807.195 1.241a4.5 4.5 0 0 1-4.5 4.5c-.416 0-.811-.074-1.193-.18c-1.267 1.498-2.013 2.748-4.024 5.105A2.98 2.98 0 0 1 8 19M19.384 6.271l-2.705 2.645l-1.329-.266l-.263-1.314l2.726-2.663c.651.393 1.19.939 1.571 1.598"/></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard
Dashboard
Analytics
Settings

Overview Dashboard

PROGRESS STEPPER

3

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. SpannerOutlineIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **CC-BY-SA-4.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.

Related Icons in Typicons (Iconify)

Browse all Typicons (Iconify) icons →
adjust-brightness
adjust-brightness
adjust-contrast
adjust-contrast
anchor
anchor
anchor-outline
anchor-outline
archive
archive
arrow-back
arrow-back
arrow-back-outline
arrow-back-outline
arrow-down
arrow-down
arrow-down-outline
arrow-down-outline
arrow-down-thick
arrow-down-thick
arrow-forward
arrow-forward
arrow-forward-outline
arrow-forward-outline