Gentleface › Security & privacy › key-sparkle

key-sparkle icon

Key sparkle: generate password, suggest password. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M1.146 10.767C1.049 11.002 1 11.246 1 11.5L1 13L2.793 13C3.126 13 3.411 12.882 3.646 12.646C3.882 12.411 4 12.126 4 11.793L4 10.5C4 10.359 4.048 10.241 4.144 10.144C4.241 10.048 4.359 10 4.5 10L6 10L6 8.5C6 8.359 6.048 8.241 6.144 8.144C6.241 8.048 6.359 8 6.5 8L9.5 8C9.539 8 9.578 7.999 9.618 7.998C9.759 7.993 9.879 8.037 9.978 8.13C10.059 8.206 10.108 8.297 10.127 8.405C10.111 8.446 10.096 8.486 10.08 8.525C10.021 8.672 9.956 8.808 9.886 8.934C9.817 8.973 9.739 8.995 9.651 8.997C9.601 8.999 9.55 9 9.5 9L7 9L7 10.485C6.946 10.495 6.891 10.504 6.836 10.514C6.541 10.563 6.283 10.741 6.134 11L5 11L5 11.793C5 12.086 4.944 12.367 4.832 12.638C4.72 12.908 4.561 13.147 4.354 13.354C4.147 13.561 3.908 13.72 3.638 13.832C3.367 13.944 3.086 14 2.793 14L0.5 14C0.359 14 0.241 13.952 0.144 13.856C0.048 13.759 0 13.641 0 13.5L0 11.5C0 11.114 0.074 10.742 0.222 10.385C0.37 10.028 0.58 9.713 0.854 9.439L5.06 5.233C4.978 4.742 4.979 4.248 5.063 3.752C5.171 3.106 5.41 2.513 5.778 1.971C6.146 1.43 6.61 0.989 7.17 0.65C7.681 0.341 8.232 0.141 8.823 0.051C9.414-0.039 10-0.012 10.58 0.132C11.216 0.289 11.79 0.571 12.302 0.979C12.815 1.387 13.219 1.883 13.514 2.467C13.785 3 13.942 3.565 13.987 4.161C14.024 4.651 13.982 5.133 13.861 5.609C13.74 6.085 13.546 6.53 13.28 6.942C13.203 7.061 13.098 7.134 12.965 7.163C12.832 7.191 12.707 7.167 12.588 7.091C12.564 7.075 12.542 7.059 12.522 7.041C12.51 6.974 12.498 6.905 12.486 6.836C12.468 6.727 12.432 6.622 12.38 6.525C12.394 6.482 12.413 6.44 12.44 6.4C12.647 6.079 12.798 5.733 12.892 5.363C12.986 4.993 13.019 4.617 12.99 4.236C12.955 3.772 12.832 3.333 12.622 2.919C12.392 2.464 12.078 2.079 11.679 1.761C11.281 1.444 10.835 1.225 10.34 1.102C9.889 0.991 9.433 0.97 8.974 1.04C8.514 1.11 8.085 1.265 7.688 1.506C7.252 1.77 6.891 2.112 6.605 2.533C6.319 2.954 6.133 3.416 6.049 3.918C5.971 4.377 5.985 4.833 6.089 5.286C6.109 5.37 6.107 5.454 6.083 5.536C6.06 5.618 6.017 5.69 5.956 5.751L1.561 10.146C1.381 10.326 1.243 10.533 1.146 10.767ZM10.207 3.793C10.402 3.988 10.5 4.224 10.5 4.5C10.5 4.776 10.402 5.012 10.207 5.207C10.012 5.402 9.776 5.5 9.5 5.5C9.224 5.5 8.988 5.402 8.793 5.207C8.598 5.012 8.5 4.776 8.5 4.5C8.5 4.224 8.598 3.988 8.793 3.793C8.988 3.598 9.224 3.5 9.5 3.5C9.776 3.5 10.012 3.598 10.207 3.793ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16Z"/></svg>

React

// Gentleface "key-sparkle" (line-round), MIT. https://gentleface.com/icons/key-sparkle
import type { SVGProps } from 'react';

export function KeySparkleIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M1.146 10.767C1.049 11.002 1 11.246 1 11.5L1 13L2.793 13C3.126 13 3.411 12.882 3.646 12.646C3.882 12.411 4 12.126 4 11.793L4 10.5C4 10.359 4.048 10.241 4.144 10.144C4.241 10.048 4.359 10 4.5 10L6 10L6 8.5C6 8.359 6.048 8.241 6.144 8.144C6.241 8.048 6.359 8 6.5 8L9.5 8C9.539 8 9.578 7.999 9.618 7.998C9.759 7.993 9.879 8.037 9.978 8.13C10.059 8.206 10.108 8.297 10.127 8.405C10.111 8.446 10.096 8.486 10.08 8.525C10.021 8.672 9.956 8.808 9.886 8.934C9.817 8.973 9.739 8.995 9.651 8.997C9.601 8.999 9.55 9 9.5 9L7 9L7 10.485C6.946 10.495 6.891 10.504 6.836 10.514C6.541 10.563 6.283 10.741 6.134 11L5 11L5 11.793C5 12.086 4.944 12.367 4.832 12.638C4.72 12.908 4.561 13.147 4.354 13.354C4.147 13.561 3.908 13.72 3.638 13.832C3.367 13.944 3.086 14 2.793 14L0.5 14C0.359 14 0.241 13.952 0.144 13.856C0.048 13.759 0 13.641 0 13.5L0 11.5C0 11.114 0.074 10.742 0.222 10.385C0.37 10.028 0.58 9.713 0.854 9.439L5.06 5.233C4.978 4.742 4.979 4.248 5.063 3.752C5.171 3.106 5.41 2.513 5.778 1.971C6.146 1.43 6.61 0.989 7.17 0.65C7.681 0.341 8.232 0.141 8.823 0.051C9.414-0.039 10-0.012 10.58 0.132C11.216 0.289 11.79 0.571 12.302 0.979C12.815 1.387 13.219 1.883 13.514 2.467C13.785 3 13.942 3.565 13.987 4.161C14.024 4.651 13.982 5.133 13.861 5.609C13.74 6.085 13.546 6.53 13.28 6.942C13.203 7.061 13.098 7.134 12.965 7.163C12.832 7.191 12.707 7.167 12.588 7.091C12.564 7.075 12.542 7.059 12.522 7.041C12.51 6.974 12.498 6.905 12.486 6.836C12.468 6.727 12.432 6.622 12.38 6.525C12.394 6.482 12.413 6.44 12.44 6.4C12.647 6.079 12.798 5.733 12.892 5.363C12.986 4.993 13.019 4.617 12.99 4.236C12.955 3.772 12.832 3.333 12.622 2.919C12.392 2.464 12.078 2.079 11.679 1.761C11.281 1.444 10.835 1.225 10.34 1.102C9.889 0.991 9.433 0.97 8.974 1.04C8.514 1.11 8.085 1.265 7.688 1.506C7.252 1.77 6.891 2.112 6.605 2.533C6.319 2.954 6.133 3.416 6.049 3.918C5.971 4.377 5.985 4.833 6.089 5.286C6.109 5.37 6.107 5.454 6.083 5.536C6.06 5.618 6.017 5.69 5.956 5.751L1.561 10.146C1.381 10.326 1.243 10.533 1.146 10.767ZM10.207 3.793C10.402 3.988 10.5 4.224 10.5 4.5C10.5 4.776 10.402 5.012 10.207 5.207C10.012 5.402 9.776 5.5 9.5 5.5C9.224 5.5 8.988 5.402 8.793 5.207C8.598 5.012 8.5 4.776 8.5 4.5C8.5 4.224 8.598 3.988 8.793 3.793C8.988 3.598 9.224 3.5 9.5 3.5C9.776 3.5 10.012 3.598 10.207 3.793ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16Z" />
    </svg>
  );
}

Vue

Vue: see /icons/key-sparkle.md

Svelte

Svelte: see /icons/key-sparkle.md

HTML img

HTML img: see /icons/key-sparkle.md

CSS

CSS: see /icons/key-sparkle.md

Data URL

Data URL: see /icons/key-sparkle.md

Sprite

Sprite: see /icons/key-sparkle.md

SwiftUI

SwiftUI: see /icons/key-sparkle.md

Compose

Compose: see /icons/key-sparkle.md

Android XML

Android XML: see /icons/key-sparkle.md

Flutter

Flutter: see /icons/key-sparkle.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { KeySparkleIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

generate password, suggest password

Example

Suggest a strong password

Built from

key + sparkle

Tags

password, access, credential, sparkle

Category

Security & privacy

Component name

KeySparkleIcon

History

2026-11-07 added, released in 0.6.0

Since

version 0.6.0

Family 19

key key-alert key-arrow-down key-arrow-up key-check key-clock key-code key-gear key-horizontal key-link key-lock key-minus

More security & privacy icons

brick-wall brick-wall-flame brick-wall-flame-check cctv cctv-off fingerprint fingerprint-check fingerprint-off fingerprint-plus fingerprint-scan fingerprint-x incognito incognito-off input-password input-password-check input-password-off · all security & privacy icons

For agents

Metadata: /icons/key-sparkle.json · Markdown: /icons/key-sparkle.md · SVG: https://gentleface.com/svg/{style}/16/key-sparkle.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/key-sparkle.png

key-sparkle icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp