Heart Lock Outline icon

solar:heart-lock-outline

The Heart Lock Outline icon (solar:heart-lock-outline) is a free SVG icon from the Solar set by 480 Design. It is drawn on a 24 × 24 grid. Solar icons are released under the CC BY 4.0 license, which allows use in personal and commercial projects as long as you credit the author. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Solar
Author: 480 Design
License: CC-BY-4.0
Size: 24 × 24
Category: Like
Tags: heartlock, lockoutline, heartlockoutline

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="currentColor"><path d="M12 11.25C12.4142 11.25 12.75 11.5858 12.75 12V14.5C12.75 14.9142 12.4142 15.25 12 15.25C11.5858 15.25 11.25 14.9142 11.25 14.5V12C11.25 11.5858 11.5858 11.25 12 11.25Z"/><path fill-rule="evenodd" d="M6.26487 6.49198C6.06517 6.55411 5.86925 6.62777 5.67779 6.7125C3.66023 7.60535 2.25 9.68634 2.25 12.0992C2.25 14.46 3.26713 16.2564 4.58706 17.6953C5.64262 18.8461 6.93514 19.8095 8.06984 20.6553C8.32624 20.8464 8.57482 21.0317 8.81054 21.2116C9.27099 21.563 9.76987 21.9413 10.2764 22.2279C10.7832 22.5146 11.3656 22.75 12 22.75C12.6344 22.75 13.2168 22.5146 13.7236 22.2279C14.2301 21.9413 14.729 21.563 15.1895 21.2116C15.4253 21.0316 15.6737 20.8464 15.9302 20.6553C17.0649 19.8095 18.3574 18.8461 19.4129 17.6953C20.7329 16.2564 21.75 14.46 21.75 12.0992C21.75 9.68634 20.3398 7.60535 18.3222 6.7125C18.1308 6.62777 17.9348 6.55411 17.7351 6.49198C17.6412 4.91563 17.1029 3.62905 16.1482 2.71548C15.0985 1.71101 13.6418 1.25 12 1.25C10.3582 1.25 8.90153 1.71101 7.85181 2.71548C6.89708 3.62905 6.35884 4.91563 6.26487 6.49198ZM7.79032 6.24995C9.17125 6.23196 10.6375 6.74241 12 7.9077C13.3625 6.74241 14.8288 6.23196 16.2097 6.24995C16.0853 5.14336 15.6812 4.3447 15.1112 3.79924C14.414 3.13213 13.3706 2.75 12 2.75C10.6294 2.75 9.58601 3.13213 8.88885 3.79924C8.31882 4.3447 7.91472 5.14336 7.79032 6.24995ZM3.75 12.0992C3.75 10.2748 4.81485 8.7347 6.28482 8.08418C7.71357 7.4519 9.63741 7.61795 11.4681 9.4594C11.6089 9.601 11.8003 9.68062 12 9.68062C12.1997 9.68062 12.3911 9.601 12.5319 9.4594C14.3626 7.61795 16.2864 7.4519 17.7152 8.08418C19.1852 8.7347 20.25 10.2748 20.25 12.0992C20.25 13.9756 19.4584 15.4268 18.3076 16.6814C17.3573 17.7173 16.2076 18.5754 15.0792 19.4177C14.8105 19.6183 14.5428 19.8182 14.2794 20.0192C13.8054 20.3809 13.3871 20.6949 12.985 20.9223C12.5832 21.1496 12.2656 21.25 12 21.25C11.7344 21.25 11.4168 21.1496 11.015 20.9223C10.6129 20.6949 10.1946 20.3809 9.72058 20.0192C9.45722 19.8182 9.18967 19.6184 8.92091 19.4178C7.79253 18.5756 6.64268 17.7173 5.69244 16.6814C4.54161 15.4268 3.75 13.9756 3.75 12.0992Z" clip-rule="evenodd"/></g></svg>

How to use the Heart Lock Outline icon

React

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

<Icon icon="solar:heart-lock-outline" width="24" />

Vue

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

<template>
  <Icon icon="solar:heart-lock-outline" width="24" />
</template>

Svelte

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

<Icon icon="solar:heart-lock-outline" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[solar--heart-lock-outline]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/solar -->
<div class="i-solar:heart-lock-outline"></div>

Web component

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

<iconify-icon icon="solar:heart-lock-outline"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/solar/heart-lock-outline.svg" alt="Heart Lock Outline icon" width="24" height="24">

Related icons in Solar

Heart Lock Outline icon FAQ

Is the Heart Lock Outline icon free for commercial use?

Yes. Solar icons are released under the CC BY 4.0 license, which allows use in personal and commercial projects as long as you credit the author.

How do I use the Heart Lock Outline icon in React?

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

How do I add the Heart Lock Outline icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/solar/heart-lock-outline.svg" alt="Heart Lock Outline icon">, or paste the SVG code inline to style it with CSS.

Browse all Solar icons →