Key icon
icon-park:key
The Key icon (icon-park:key) is a free SVG icon from the IconPark set by ByteDance. It is drawn on a 48 × 48 grid. IconPark icons are released under the Apache 2.0 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
- IconPark
- Author
- ByteDance
- License
- Apache-2.0
- Size
- 48 × 48
- Category
- Safe
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g fill="none" stroke="#000" stroke-linejoin="round" stroke-width="4"><path fill="#2F88FF" d="M22.8682 24.2982C25.4105 26.7935 26.4138 30.4526 25.4971 33.8863C24.5805 37.32 21.8844 40.0019 18.4325 40.9137C14.9806 41.8256 11.3022 40.8276 8.79375 38.2986C5.02208 34.4141 5.07602 28.2394 8.91499 24.4206C12.754 20.6019 18.9613 20.5482 22.8664 24.3L22.8682 24.2982Z"/><path stroke-linecap="round" d="M23 24L40 7"/><path fill="#2F88FF" d="M30.3052 16.9001L35.7337 22.3001L42.0671 16.0001L36.6385 10.6001L30.3052 16.9001Z"/></g></svg>
How to use the Key icon
React
import { Icon } from "@iconify/react";
<Icon icon="icon-park:key" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="icon-park:key" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="icon-park:key" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[icon-park--key]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/icon-park -->
<div class="i-icon-park:key"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="icon-park:key"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/icon-park/key.svg" alt="Key icon" width="24" height="24">
Related icons in IconPark
Key icon in other icon sets
Key icon FAQ
Is the Key icon free for commercial use?
Yes. IconPark icons are released under the Apache 2.0 license, which allows use in personal and commercial projects.
How do I use the Key icon in React?
Install @iconify/react and render <Icon icon="icon-park:key" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Key icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/icon-park/key.svg" alt="Key icon">, or paste the SVG code inline to style it with CSS.
Browse all IconPark icons →
ICONYZ
