key icon

key-outlined from Ant Design Icons by HeskeyBaozi · Outlined · MIT Free for personal and commercial use.

Name
key-outlined
Set
Ant Design Icons
Style
Outlined
Viewbox
1024×1024
License
MIT
Aliases
key, key-outline

The same icon in other sets

keyAkar IconskeyBootstrap IconskeyBoxIcons v2keyBoxIcons v2 SolidkeyCarbonkeyCatppuccin IconskeyCodiconskeyEmoji One (Colored)keyElement PluskeyFont Awesome 6 SolidkeyFont Awesome SolidkeyFeather Iconskey-16-filledFluent UI System IconskeyFluent EmojikeyFluent Emoji FlatkeyFluent Emoji High ContrastkeyFirefox OS Emojikeycss.ggkeyHeroIconskeyHumbleiconskeyIconParkkeyIconPark OutlinekeyIconPark SolidkeyIconPark TwoTone

Use the key icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M608 112c-167.9 0-304 136.1-304 304c0 70.3 23.9 135 63.9 186.5L255.8 713.6l-62.3-62.3c-3.148-3.08-8.252-3.08-11.4 0l-39.8 39.8c-3.08 3.148-3.08 8.252 0 11.4l62.3 62.3l-44.9 44.9l-62.3-62.3c-3.148-3.08-8.252-3.08-11.4 0l-39.8 39.8c-3.08 3.148-3.08 8.252 0 11.4l110.3 111.2c3.1 3.1 8.2 3.1 11.3 0l253.6-253.6A304.1 304.1 0 0 0 608 720c167.9 0 304-136.1 304-304S775.9 112 608 112m161.2 465.2C726.2 620.3 668.9 644 608 644s-118.2-23.7-161.2-66.8C403.7 534.2 380 476.9 380 416s23.7-118.2 66.8-161.2c43-43.1 100.3-66.8 161.2-66.8s118.2 23.7 161.2 66.8c43.1 43 66.8 100.3 66.8 161.2s-23.7 118.2-66.8 161.2"/></svg>

React

import type { SVGProps } from "react";

export function AntDesignKeyOutlined(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M608 112c-167.9 0-304 136.1-304 304c0 70.3 23.9 135 63.9 186.5L255.8 713.6l-62.3-62.3c-3.148-3.08-8.252-3.08-11.4 0l-39.8 39.8c-3.08 3.148-3.08 8.252 0 11.4l62.3 62.3l-44.9 44.9l-62.3-62.3c-3.148-3.08-8.252-3.08-11.4 0l-39.8 39.8c-3.08 3.148-3.08 8.252 0 11.4l110.3 111.2c3.1 3.1 8.2 3.1 11.3 0l253.6-253.6A304.1 304.1 0 0 0 608 720c167.9 0 304-136.1 304-304S775.9 112 608 112m161.2 465.2C726.2 620.3 668.9 644 608 644s-118.2-23.7-161.2-66.8C403.7 534.2 380 476.9 380 416s23.7-118.2 66.8-161.2c43-43.1 100.3-66.8 161.2-66.8s118.2 23.7 161.2 66.8c43.1 43 66.8 100.3 66.8 161.2s-23.7 118.2-66.8 161.2"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M608 112c-167.9 0-304 136.1-304 304c0 70.3 23.9 135 63.9 186.5L255.8 713.6l-62.3-62.3c-3.148-3.08-8.252-3.08-11.4 0l-39.8 39.8c-3.08 3.148-3.08 8.252 0 11.4l62.3 62.3l-44.9 44.9l-62.3-62.3c-3.148-3.08-8.252-3.08-11.4 0l-39.8 39.8c-3.08 3.148-3.08 8.252 0 11.4l110.3 111.2c3.1 3.1 8.2 3.1 11.3 0l253.6-253.6A304.1 304.1 0 0 0 608 720c167.9 0 304-136.1 304-304S775.9 112 608 112m161.2 465.2C726.2 620.3 668.9 644 608 644s-118.2-23.7-161.2-66.8C403.7 534.2 380 476.9 380 416s23.7-118.2 66.8-161.2c43-43.1 100.3-66.8 161.2-66.8s118.2 23.7 161.2 66.8c43.1 43 66.8 100.3 66.8 161.2s-23.7 118.2-66.8 161.2"/></svg>
</template>

CSS

.icon-key-outlined {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M608%20112c-167.9%200-304%20136.1-304%20304c0%2070.3%2023.9%20135%2063.9%20186.5L255.8%20713.6l-62.3-62.3c-3.148-3.08-8.252-3.08-11.4%200l-39.8%2039.8c-3.08%203.148-3.08%208.252%200%2011.4l62.3%2062.3l-44.9%2044.9l-62.3-62.3c-3.148-3.08-8.252-3.08-11.4%200l-39.8%2039.8c-3.08%203.148-3.08%208.252%200%2011.4l110.3%20111.2c3.1%203.1%208.2%203.1%2011.3%200l253.6-253.6A304.1%20304.1%200%200%200%20608%20720c167.9%200%20304-136.1%20304-304S775.9%20112%20608%20112m161.2%20465.2C726.2%20620.3%20668.9%20644%20608%20644s-118.2-23.7-161.2-66.8C403.7%20534.2%20380%20476.9%20380%20416s23.7-118.2%2066.8-161.2c43-43.1%20100.3-66.8%20161.2-66.8s118.2%2023.7%20161.2%2066.8c43.1%2043%2066.8%20100.3%2066.8%20161.2s-23.7%20118.2-66.8%20161.2%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M608%20112c-167.9%200-304%20136.1-304%20304c0%2070.3%2023.9%20135%2063.9%20186.5L255.8%20713.6l-62.3-62.3c-3.148-3.08-8.252-3.08-11.4%200l-39.8%2039.8c-3.08%203.148-3.08%208.252%200%2011.4l62.3%2062.3l-44.9%2044.9l-62.3-62.3c-3.148-3.08-8.252-3.08-11.4%200l-39.8%2039.8c-3.08%203.148-3.08%208.252%200%2011.4l110.3%20111.2c3.1%203.1%208.2%203.1%2011.3%200l253.6-253.6A304.1%20304.1%200%200%200%20608%20720c167.9%200%20304-136.1%20304-304S775.9%20112%20608%20112m161.2%20465.2C726.2%20620.3%20668.9%20644%20608%20644s-118.2-23.7-161.2-66.8C403.7%20534.2%20380%20476.9%20380%20416s23.7-118.2%2066.8-161.2c43-43.1%20100.3-66.8%20161.2-66.8s118.2%2023.7%20161.2%2066.8c43.1%2043%2066.8%20100.3%2066.8%20161.2s-23.7%20118.2-66.8%20161.2%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ant-design/key-outlined.svg?color=%231a73e8&size=48