Locked With Pen

By Microsoft Corporation in Fluent Emoji

SVG

React

Vue

Base64

Copy
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 32 32">
  <g fill="none">
    <g filter="url(#f865idj)">
      <path stroke="#C2C2C6" stroke-width="2.75" d="M9.328 14.07V8.508a5.016 5.016 0 0 1 10.031 0v5.562"/>
    </g>
    <path stroke="url(#f865id0)" stroke-width="2.75" d="M9.328 14.07V8.508a5.016 5.016 0 0 1 10.031 0v5.562"/>
    <g filter="url(#f865idk)">
      <path stroke="url(#f865id1)" d="M9.719 14.07V8.31c0-2.868 2.294-5.193 5.125-5.193c2.83 0 5.125 2.325 5.125 5.194v5.76"/>
      <path stroke="url(#f865id2)" d="M9.719 14.07V8.31c0-2.868 2.294-5.193 5.125-5.193c2.83 0 5.125 2.325 5.125 5.194v5.76"/>
    </g>
    <g filter="url(#f865idl)">
      <rect width="21.938" height="18.844" x="3.406" y="11.055" fill="url(#f865idb)" rx="3"/>
    </g>
    <rect width="21.938" height="18.844" x="3.406" y="11.055" fill="url(#f865id3)" rx="3"/>
    <rect width="21.938" height="18.844" x="3.406" y="11.055" fill="url(#f865idc)" rx="3"/>
    <rect width="21.938" height="18.844" x="3.406" y="11.055" fill="url(#f865id4)" rx="3"/>
    <g stroke-width="1.75" filter="url(#f865idm)">
      <path stroke="url(#f865idd)" d="M15.773 20.392a2.607 2.607 0 1 0-2.797.017v3.294a1.398 1.398 0 0 0 2.797 0v-3.311Z"/>
      <path stroke="url(#f865ide)" d="M15.773 20.392a2.607 2.607 0 1 0-2.797.017v3.294a1.398 1.398 0 0 0 2.797 0v-3.311Z"/>
    </g>
    <path fill="url(#f865id5)" d="M15.773 20.392a2.607 2.607 0 1 0-2.797.017v3.294a1.398 1.398 0 0 0 2.797 0v-3.311Z"/>
    <g filter="url(#f865idn)">
      <path fill="url(#f865idf)" d="M19.808 14.817a1.298 1.298 0 0 0-.426 2.525v4.49c0 .471.12.934.349 1.346l3.165 5.698a.693.693 0 0 0 1.211 0l3.165-5.698a2.77 2.77 0 0 0 .349-1.346v-4.49a1.3 1.3 0 0 0-.426-2.525h-7.387Z"/>
    </g>
    <g filter="url(#f865ido)">
      <path fill="url(#f865idg)" d="M20.305 15.563h8.922v6.254a3 3 0 0 1-.378 1.456l-3.428 6.172a.75.75 0 0 1-1.311 0l-3.428-6.172a3 3 0 0 1-.377-1.456v-6.255Z"/>
    </g>
    <path fill="url(#f865idh)" d="M20.305 15.563h8.922v6.254a3 3 0 0 1-.378 1.456l-3.428 6.172a.75.75 0 0 1-1.311 0l-3.428-6.172a3 3 0 0 1-.377-1.456v-6.255Z"/>
    <path fill="url(#f865idi)" d="M20.305 15.563h8.922v6.254a3 3 0 0 1-.378 1.456l-3.428 6.172a.75.75 0 0 1-1.311 0l-3.428-6.172a3 3 0 0 1-.377-1.456v-6.255Z"/>
    <path fill="#766C81" d="M25.266 23.343c0-.173.113-.322.265-.405a1.601 1.601 0 1 0-1.53 0c.15.083.265.232.265.405v5.989a.5.5 0 1 0 1 0v-5.99Z"/>
    <path fill="url(#f865id6)" d="M25.266 23.343c0-.173.113-.322.265-.405a1.601 1.601 0 1 0-1.53 0c.15.083.265.232.265.405v5.989a.5.5 0 1 0 1 0v-5.99Z"/>
    <path fill="url(#f865id7)" d="M25.266 23.343c0-.173.113-.322.265-.405a1.601 1.601 0 1 0-1.53 0c.15.083.265.232.265.405v5.989a.5.5 0 1 0 1 0v-5.99Z"/>
    <path fill="url(#f865id8)" d="M25.266 23.343c0-.173.113-.322.265-.405a1.601 1.601 0 1 0-1.53 0c.15.083.265.232.265.405v5.989a.5.5 0 1 0 1 0v-5.99Z"/>
    <g filter="url(#f865idp)">
      <rect width="10.813" height="2.813" x="19.359" y="14.219" fill="#339AEF" rx="1.406"/>
    </g>
    <rect width="10.813" height="2.813" x="19.359" y="14.219" fill="url(#f865id9)" rx="1.406"/>
    <g filter="url(#f865idq)">
      <path stroke="url(#f865ida)" stroke-linecap="round" stroke-width=".25" d="M23.547 21.172c-.115.374-.079 1.194.926 1.591c.08.032.136.108.136.194v1.09"/>
    </g>
    <defs>
      <radialGradient id="f865id0" cx="0" cy="0" r="1" gradientTransform="matrix(0 -4.84375 5.28858 0 14.344 7.586)" gradientUnits="userSpaceOnUse">
        <stop offset=".531" stop-color="#AB83C0"/>
        <stop offset="1" stop-color="#CBBBDC" stop-opacity="0"/>
      </radialGradient>
      <radialGradient id="f865id1" cx="0" cy="0" r="1" gradientTransform="matrix(-3.81893 3.59375 -4.9365 -5.24582 20.274 4.523)" gradientUnits="userSpaceOnUse">
        <stop offset=".216" stop-color="#EDECF3"/>
        <stop offset="1" stop-color="#EDECF3" stop-opacity="0"/>
      </radialGradient>
      <radialGradient id="f865id2" cx="0" cy="0" r="1" gradientTransform="matrix(0 -7.125 5.16319 0 10.925 12.586)" gradientUnits="userSpaceOnUse">
        <stop stop-color="#EDECF3"/>
        <stop offset="1" stop-color="#EDECF3" stop-opacity="0"/>
      </radialGradient>
      <radialGradient id="f865id3" cx="0" cy="0" r="1" gradientTransform="matrix(-2.18751 -2.40624 5.60574 -5.09619 24.781 29.898)" gradientUnits="userSpaceOnUse">
        <stop stop-color="#FF8650"/>
        <stop offset="1" stop-color="#FF8650" stop-opacity="0"/>
      </radialGradient>
      <radialGradient id="f865id4" cx="0" cy="0" r="1" gradientTransform="rotate(126.254 9.715 11.87) scale(2.32513 5.25171)" gradientUnits="userSpaceOnUse">
        <stop stop-color="#FFF760"/>
        <stop offset="1" stop-color="#FFF760" stop-opacity="0"/>
      </radialGradient>
      <radialGradient id="f865id5" cx="0" cy="0" r="1" gradientTransform="rotate(34.061 -24.512 28.495) scale(5.69121 7.82719)" gradientUnits="userSpaceOnUse">
        <stop offset=".217" stop-color="#564F80"/>
        <stop offset="1" stop-color="#473154"/>
      </radialGradient>
      <radialGradient id="f865id6" cx="0" cy="0" r="1" gradientTransform="matrix(-2.96094 0 0 -4.4375 26.125 26.344)" gradientUnits="userSpaceOnUse">
        <stop offset=".285" stop-color="#4F3F5E"/>
        <stop offset="1" stop-color="#4F3F5E" stop-opacity="0"/>
      </radialGradient>
      <radialGradient id="f865id7" cx="0" cy="0" r="1" gradientTransform="matrix(4.40625 -4.0371 4.6308 5.05424 22.219 24.88)" gradientUnits="userSpaceOnUse">
        <stop offset=".678" stop-color="#776B82" stop-opacity="0"/>
        <stop offset=".886" stop-color="#53485E"/>
      </radialGradient>
      <radialGradient id="f865id8" cx="0" cy="0" r="1" gradientTransform="matrix(0 -9.64063 4.8322 0 24.766 29.438)" gradientUnits="userSpaceOnUse">
        <stop offset=".89" stop-color="#64437E" stop-opacity="0"/>
        <stop offset="1" stop-color="#64437E"/>
      </radialGradient>
      <radialGradient id="f865id9" cx="0" cy="0" r="1" gradientTransform="matrix(-1.09374 .875 -.80488 -1.0061 30 14.75)" gradientUnits="userSpaceOnUse">
        <stop offset=".094" stop-color="#5CBEFF"/>
        <stop offset="1" stop-color="#2FAAE9" stop-opacity="0"/>
      </radialGradient>
      <radialGradient id="f865ida" cx="0" cy="0" r="1" gradientTransform="matrix(1.96875 -.35938 .29841 1.63477 23.594 22.61)" gradientUnits="userSpaceOnUse">
        <stop stop-color="#949197"/>
        <stop offset="1" stop-color="#949197" stop-opacity="0"/>
      </radialGradient>
      <linearGradient id="f865idb" x1="8.531" x2="15.469" y1="14.117" y2="29.898" gradientUnits="userSpaceOnUse">
        <stop stop-color="#FFC74E"/>
        <stop offset="1" stop-color="#F7864E"/>
      </linearGradient>
      <linearGradient id="f865idc" x1="14.375" x2="14.375" y1="10.742" y2="12.242" gradientUnits="userSpaceOnUse">
        <stop stop-color="#F3D04E"/>
        <stop offset="1" stop-color="#F3D04E" stop-opacity="0"/>
      </linearGradient>
      <linearGradient id="f865idd" x1="17.5" x2="13.625" y1="21.68" y2="21.68" gradientUnits="userSpaceOnUse">
        <stop offset=".331" stop-color="#D98A40"/>
        <stop offset="1" stop-color="#D98A40" stop-opacity="0"/>
      </linearGradient>
      <linearGradient id="f865ide" x1="11.25" x2="13.969" y1="20.742" y2="20.742" gradientUnits="userSpaceOnUse">
        <stop stop-color="#FFCD63"/>
        <stop offset="1" stop-color="#FFCD63" stop-opacity="0"/>
      </linearGradient>
      <linearGradient id="f865idf" x1="23.502" x2="23.502" y1="14.817" y2="29.233" gradientUnits="userSpaceOnUse">
        <stop stop-color="#AA6D3B"/>
        <stop offset="1" stop-color="#BE5343"/>
      </linearGradient>
      <linearGradient id="f865idg" x1="22.656" x2="29.227" y1="21.25" y2="21.25" gradientUnits="userSpaceOnUse">
        <stop stop-color="#BDACD1"/>
        <stop offset="1" stop-color="#B8A8CF"/>
      </linearGradient>
      <linearGradient id="f865idh" x1="22.469" x2="24.125" y1="27.625" y2="26.906" gradientUnits="userSpaceOnUse">
        <stop stop-color="#A97CC9"/>
        <stop offset="1" stop-color="#A97CC9" stop-opacity="0"/>
      </linearGradient>
      <linearGradient id="f865idi" x1="24.766" x2="24.766" y1="16.719" y2="17.438" gradientUnits="userSpaceOnUse">
        <stop offset=".273" stop-color="#9D8BC2"/>
        <stop offset="1" stop-color="#9D8BC2" stop-opacity="0"/>
      </linearGradient>
      <filter id="f865idj" width="13.781" height="11.953" x="7.953" y="2.117" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
        <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feOffset dx="1"/>
        <feGaussianBlur stdDeviation=".5"/>
        <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
        <feColorMatrix values="0 0 0 0 0.560784 0 0 0 0 0.556863 0 0 0 0 0.576471 0 0 0 1 0"/>
        <feBlend in2="shape" result="effect1_innerShadow_18_23598"/>
      </filter>
      <filter id="f865idk" width="12.75" height="12.953" x="8.469" y="1.867" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
        <feGaussianBlur result="effect1_foregroundBlur_18_23598" stdDeviation=".375"/>
      </filter>
      <filter id="f865idl" width="23.438" height="20.344" x="2.656" y="10.305" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
        <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feOffset dy="-.75"/>
        <feGaussianBlur stdDeviation=".375"/>
        <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
        <feColorMatrix values="0 0 0 0 0.898039 0 0 0 0 0.364706 0 0 0 0 0.423529 0 0 0 1 0"/>
        <feBlend in2="shape" result="effect1_innerShadow_18_23598"/>
        <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feOffset dx="-1"/>
        <feGaussianBlur stdDeviation=".375"/>
        <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
        <feColorMatrix values="0 0 0 0 1 0 0 0 0 0.772549 0 0 0 0 0.364706 0 0 0 1 0"/>
        <feBlend in2="effect1_innerShadow_18_23598" result="effect2_innerShadow_18_23598"/>
        <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feOffset dy="1"/>
        <feGaussianBlur stdDeviation=".375"/>
        <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
        <feColorMatrix values="0 0 0 0 1 0 0 0 0 0.843137 0 0 0 0 0.266667 0 0 0 1 0"/>
        <feBlend in2="effect2_innerShadow_18_23598" result="effect3_innerShadow_18_23598"/>
        <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feOffset dx=".75"/>
        <feGaussianBlur stdDeviation=".375"/>
        <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
        <feColorMatrix values="0 0 0 0 0.729412 0 0 0 0 0.478431 0 0 0 0 0.207843 0 0 0 1 0"/>
        <feBlend in2="effect3_innerShadow_18_23598" result="effect4_innerShadow_18_23598"/>
      </filter>
      <filter id="f865idm" width="7.965" height="12.26" x="10.379" y="14.217" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
        <feGaussianBlur result="effect1_foregroundBlur_18_23598" stdDeviation=".25"/>
      </filter>
      <filter id="f865idn" width="12.384" height="16.816" x="17.309" y="13.617" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
        <feGaussianBlur result="effect1_foregroundBlur_18_23598" stdDeviation=".6"/>
      </filter>
      <filter id="f865ido" width="10.422" height="15.768" x="19.555" y="14.813" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
        <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feOffset dx=".75" dy="-.75"/>
        <feGaussianBlur stdDeviation=".75"/>
        <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
        <feColorMatrix values="0 0 0 0 0.611765 0 0 0 0 0.509804 0 0 0 0 0.647059 0 0 0 1 0"/>
        <feBlend in2="shape" result="effect1_innerShadow_18_23598"/>
        <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feOffset dx="-.75" dy=".75"/>
        <feGaussianBlur stdDeviation=".5"/>
        <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
        <feColorMatrix values="0 0 0 0 0.858824 0 0 0 0 0.827451 0 0 0 0 0.898039 0 0 0 1 0"/>
        <feBlend in2="effect1_innerShadow_18_23598" result="effect2_innerShadow_18_23598"/>
        <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feOffset dx="-.15" dy=".15"/>
        <feGaussianBlur stdDeviation=".25"/>
        <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
        <feColorMatrix values="0 0 0 0 0.815686 0 0 0 0 0.796078 0 0 0 0 0.843137 0 0 0 1 0"/>
        <feBlend in2="effect2_innerShadow_18_23598" result="effect3_innerShadow_18_23598"/>
      </filter>
      <filter id="f865idp" width="11.613" height="3.612" x="18.959" y="13.819" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
        <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feOffset dx="-.4" dy=".4"/>
        <feGaussianBlur stdDeviation=".375"/>
        <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
        <feColorMatrix values="0 0 0 0 0.2 0 0 0 0 0.643137 0 0 0 0 0.862745 0 0 0 1 0"/>
        <feBlend in2="shape" result="effect1_innerShadow_18_23598"/>
        <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feOffset dx=".4" dy="-.4"/>
        <feGaussianBlur stdDeviation=".375"/>
        <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
        <feColorMatrix values="0 0 0 0 0.203922 0 0 0 0 0.411765 0 0 0 0 0.866667 0 0 0 1 0"/>
        <feBlend in2="effect1_innerShadow_18_23598" result="effect2_innerShadow_18_23598"/>
      </filter>
      <filter id="f865idq" width="1.858" height="3.625" x="23.127" y="20.797" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
        <feGaussianBlur result="effect1_foregroundBlur_18_23598" stdDeviation=".125"/>
      </filter>
    </defs>
  </g>
</svg>


Locked With Pen Icons examples

See what this icon looks like in some mockup designs
Locked With PenHome

Related icons in Fluent Emoji

copy save
1st-place-medal
copy save
2nd-place-medal
copy save
3rd-place-medal
copy save
admission-tickets
copy save
american-football
copy save
artist-palette
copy save
badminton
copy save
balloon
copy save
baseball
copy save
basketball
copy save
bowling
copy save
boxing-glove
copy save
bullseye
copy save
carp-streamer
copy save
chess-pawn
copy save
christmas-tree
copy save
club-suit
copy save
confetti-ball
copy save
cricket-game
copy save
crystal-ball