ICONYZ
English
Key Filled icon from Reicon

Key Filled icon

reicon:key-filled

The Key Filled icon (reicon:key-filled) is a free SVG icon from the Reicon set. It is drawn on a 24 × 24 grid. Reicon icons are released under the MIT 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
Reicon
Author
REICON
License
MIT
Size
24 × 24
Category
Security
Tags
keyfilled
Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M22 8.293c0 3.476-2.83 6.294-6.32 6.294c-.636 0-2.086-.146-2.791-.732l-.882.878c-.519.517-.379.669-.148.919c.096.105.208.226.295.399c0 0 .735 1.024 0 2.049c-.441.585-1.676 1.404-3.086 0l-.294.292s.881 1.025.147 2.05c-.441.585-1.617 1.17-2.646.146l-1.028 1.024c-.706.703-1.568.293-1.91 0l-.883-.878c-.823-.82-.343-1.708 0-2.05l7.642-7.61s-.735-1.17-.735-2.78c0-3.476 2.83-6.294 6.32-6.294S22 4.818 22 8.293m-6.319 2.196a2.2 2.2 0 0 0 2.204-2.195a2.2 2.2 0 0 0-2.204-2.196a2.2 2.2 0 0 0-2.204 2.196a2.2 2.2 0 0 0 2.204 2.195" clip-rule="evenodd"/></svg>

How to use the Key Filled icon

React

import { Icon } from "@iconify/react";

<Icon icon="reicon:key-filled" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="reicon:key-filled" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="reicon:key-filled" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[reicon--key-filled]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/reicon -->
<div class="i-reicon:key-filled"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="reicon:key-filled"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/reicon/key-filled.svg" alt="Key Filled icon" width="24" height="24">

Related icons in Reicon

key icon
key
 key-duotone icon
key-duotone
 key-square icon
key-square
 key-square-duotone icon
key-square-duotone
 key-square-filled icon
key-square-filled
 key-square2 icon
key-square2
 key-square2-duotone icon
key-square2-duotone
 key-square2-filled icon
key-square2-filled
 key-square3 icon
key-square3
 key-square3-duotone icon
key-square3-duotone
 key-square3-filled icon
key-square3-filled
 key-square4 icon
key-square4
 key-square4-filled icon
key-square4-filled
 key-square5 icon
key-square5
 key-square5-duotone icon
key-square5-duotone
 key-square5-filled icon
key-square5-filled
 key-square6 icon
key-square6
 key-square6-filled icon
key-square6-filled
 key-square8 icon
key-square8
 key-square8-filled icon
key-square8-filled
 key2 icon
key2
 key2-duotone icon
key2-duotone
 key2-filled icon
key2-filled
 key3 icon
key3

Key Filled icon in other icon sets

Key Filled icon from Tabler Icons
Tabler Icons
 Key Filled icon from Bitcoin Icons
Bitcoin Icons
 Key Filled icon from Boxicons
Boxicons
 Key Filled icon from Griddy Icons
Griddy Icons
 Key Filled icon from Lucide Extended
Lucide Extended
 Key Filled icon from TDesign Icons
TDesign Icons

Key Filled icon FAQ

Is the Key Filled icon free for commercial use?

Yes. Reicon icons are released under the MIT license, which allows use in personal and commercial projects.

How do I use the Key Filled icon in React?

Install @iconify/react and render <Icon icon="reicon:key-filled" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Key Filled icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/reicon/key-filled.svg" alt="Key Filled icon">, or paste the SVG code inline to style it with CSS.

Browse all Reicon icons →