Home/Libraries/Emoji One (Colored) (Iconify)/key

Emoji One (Colored) (Iconify)

Key

License: CC-BY-4.0

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 64 64"><path fill="#818cf8" d="M57 7C50.3.3 39.5.3 32.9 7c-5.5 5.5-6.4 13.8-3 20.3L5.5 52L2 60.4L3.6 62l6.3-.6l26.8-27.2c6.5 3.6 14.8 2.6 20.2-2.9c6.8-6.7 6.8-17.6.1-24.3m-4.8 12.2c-2 2-5.3 2-7.3 0s-2-5.3 0-7.4c2-2 5.3-2 7.3 0c2.1 2 2.1 5.3 0 7.4"/><path fill="#818cf8" d="m15.8 57.5l1.4-1.5v-2l-7.3 7.4l4.4-.5l1.5-1.5zM26.1 47l1.4-1.5v-2l-8.8 9h2l1.4-1.5h2l2-2zm4.4-15.4c.5-.5.2-.7 0-1c-.3-.3-.4-.6-.9 0L7.9 52.5c-.5.5-.2.7 0 1c.3.3.4.6.9 0zm3 3c.5-.5.2-.7 0-1c-.3-.3-.4-.6-.9 0L10.8 55.5c-.5.5-.2.7 0 1c.3.3.4.6.9 0zM56 8c-6.1-6.1-16-6.1-22.1 0c-4.6 4.6-5.7 11.4-3.4 17.1c-2.1-5.4-.9-11.7 3.4-16C39.7 3.2 49.2 3.2 55 9c5.8 5.9 5.8 15.4 0 21.2c-4.3 4.3-10.6 5.4-15.9 3.4c5.7 2.3 12.4 1.2 17-3.4c6-6.1 6-16.1-.1-22.2"/></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. KeyIcon.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-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.