passkey fill icon

passkey-fill-24 from Octicons by GitHub · 24 · MIT Free for personal and commercial use.

Name: passkey-fill-24
Set: Octicons
Style: 24
Viewbox: 24×24
License: MIT

1 other variant in Octicons

Use the passkey fill icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M9.496 2a5.25 5.25 0 0 0-2.519 9.857A9.01 9.01 0 0 0 .5 20.228a.75.75 0 0 0 .728.772h5.257q5.008.002 10.015 0a.5.5 0 0 0 .5-.5v-4.669a.95.95 0 0 0-.171-.551a9.02 9.02 0 0 0-4.814-3.423A5.25 5.25 0 0 0 9.496 2"/><path fill="currentColor" d="M23.625 10.313c0 1.31-.672 2.464-1.691 3.134a.4.4 0 0 0-.184.33v.886a.37.37 0 0 1-.11.265l-.534.534a.19.19 0 0 0 0 .265l.534.534c.071.07.11.166.11.265v.347a.37.37 0 0 1-.11.265l-.534.534a.19.19 0 0 0 0 .265l.534.534a.37.37 0 0 1 .11.265v.431a.38.38 0 0 1-.097.253l-1.2 1.319a.78.78 0 0 1-1.156 0l-1.2-1.319a.38.38 0 0 1-.097-.253v-5.39a.4.4 0 0 0-.184-.33a3.75 3.75 0 1 1 5.809-3.134M21 9.75a1.125 1.125 0 1 0-2.25 0a1.125 1.125 0 0 0 2.25 0"/></svg>

React

import type { SVGProps } from "react";

export function OcticonPasskeyFill24(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M9.496 2a5.25 5.25 0 0 0-2.519 9.857A9.01 9.01 0 0 0 .5 20.228a.75.75 0 0 0 .728.772h5.257q5.008.002 10.015 0a.5.5 0 0 0 .5-.5v-4.669a.95.95 0 0 0-.171-.551a9.02 9.02 0 0 0-4.814-3.423A5.25 5.25 0 0 0 9.496 2"/><path fill="currentColor" d="M23.625 10.313c0 1.31-.672 2.464-1.691 3.134a.4.4 0 0 0-.184.33v.886a.37.37 0 0 1-.11.265l-.534.534a.19.19 0 0 0 0 .265l.534.534c.071.07.11.166.11.265v.347a.37.37 0 0 1-.11.265l-.534.534a.19.19 0 0 0 0 .265l.534.534a.37.37 0 0 1 .11.265v.431a.38.38 0 0 1-.097.253l-1.2 1.319a.78.78 0 0 1-1.156 0l-1.2-1.319a.38.38 0 0 1-.097-.253v-5.39a.4.4 0 0 0-.184-.33a3.75 3.75 0 1 1 5.809-3.134M21 9.75a1.125 1.125 0 1 0-2.25 0a1.125 1.125 0 0 0 2.25 0"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M9.496 2a5.25 5.25 0 0 0-2.519 9.857A9.01 9.01 0 0 0 .5 20.228a.75.75 0 0 0 .728.772h5.257q5.008.002 10.015 0a.5.5 0 0 0 .5-.5v-4.669a.95.95 0 0 0-.171-.551a9.02 9.02 0 0 0-4.814-3.423A5.25 5.25 0 0 0 9.496 2"/><path fill="currentColor" d="M23.625 10.313c0 1.31-.672 2.464-1.691 3.134a.4.4 0 0 0-.184.33v.886a.37.37 0 0 1-.11.265l-.534.534a.19.19 0 0 0 0 .265l.534.534c.071.07.11.166.11.265v.347a.37.37 0 0 1-.11.265l-.534.534a.19.19 0 0 0 0 .265l.534.534a.37.37 0 0 1 .11.265v.431a.38.38 0 0 1-.097.253l-1.2 1.319a.78.78 0 0 1-1.156 0l-1.2-1.319a.38.38 0 0 1-.097-.253v-5.39a.4.4 0 0 0-.184-.33a3.75 3.75 0 1 1 5.809-3.134M21 9.75a1.125 1.125 0 1 0-2.25 0a1.125 1.125 0 0 0 2.25 0"/></svg>
</template>

CSS

.icon-passkey-fill-24 {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9.496%202a5.25%205.25%200%200%200-2.519%209.857A9.01%209.01%200%200%200%20.5%2020.228a.75.75%200%200%200%20.728.772h5.257q5.008.002%2010.015%200a.5.5%200%200%200%20.5-.5v-4.669a.95.95%200%200%200-.171-.551a9.02%209.02%200%200%200-4.814-3.423A5.25%205.25%200%200%200%209.496%202%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M23.625%2010.313c0%201.31-.672%202.464-1.691%203.134a.4.4%200%200%200-.184.33v.886a.37.37%200%200%201-.11.265l-.534.534a.19.19%200%200%200%200%20.265l.534.534c.071.07.11.166.11.265v.347a.37.37%200%200%201-.11.265l-.534.534a.19.19%200%200%200%200%20.265l.534.534a.37.37%200%200%201%20.11.265v.431a.38.38%200%200%201-.097.253l-1.2%201.319a.78.78%200%200%201-1.156%200l-1.2-1.319a.38.38%200%200%201-.097-.253v-5.39a.4.4%200%200%200-.184-.33a3.75%203.75%200%201%201%205.809-3.134M21%209.75a1.125%201.125%200%201%200-2.25%200a1.125%201.125%200%200%200%202.25%200%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9.496%202a5.25%205.25%200%200%200-2.519%209.857A9.01%209.01%200%200%200%20.5%2020.228a.75.75%200%200%200%20.728.772h5.257q5.008.002%2010.015%200a.5.5%200%200%200%20.5-.5v-4.669a.95.95%200%200%200-.171-.551a9.02%209.02%200%200%200-4.814-3.423A5.25%205.25%200%200%200%209.496%202%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M23.625%2010.313c0%201.31-.672%202.464-1.691%203.134a.4.4%200%200%200-.184.33v.886a.37.37%200%200%201-.11.265l-.534.534a.19.19%200%200%200%200%20.265l.534.534c.071.07.11.166.11.265v.347a.37.37%200%200%201-.11.265l-.534.534a.19.19%200%200%200%200%20.265l.534.534a.37.37%200%200%201%20.11.265v.431a.38.38%200%200%201-.097.253l-1.2%201.319a.78.78%200%200%201-1.156%200l-1.2-1.319a.38.38%200%200%201-.097-.253v-5.39a.4.4%200%200%200-.184-.33a3.75%203.75%200%201%201%205.809-3.134M21%209.75a1.125%201.125%200%201%200-2.25%200a1.125%201.125%200%200%200%202.25%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/octicon/passkey-fill-24.svg?color=%231a73e8&size=48