heart icon
heart-outline from Teenyicons by smhmd · Outline · MIT Free for personal and commercial use.
- Name
- heart-outline
- Set
- Teenyicons
- Style
- Outline
- Viewbox
- 15×15
- License
- MIT
1 other variant in Teenyicons
The same icon in other sets
heartAkar Iconsheart-filledAnt Design IconsheartBootstrap IconsheartBoxIcons v2heartBoxIcons v2 SolidheartCodiconsheart-fillEva IconsheartFramework7 IconsheartFont Awesome 6 RegularheartFont Awesome 6 SolidheartFont Awesome RegularheartFont Awesome SolidheartFeather Iconsheart-outlineFlowbite Iconsheart-12-filledFluent UI System Iconsheart-16Fluent UI System Color Iconsheartcss.ggheartHealth IconsheartHeroIconsheartHuge IconsheartHumbleiconsheartIconParkheartIconPark OutlineheartIconoir
Related icons in Teenyicons
Use the heart icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="m7.5 13.5l-.354.354a.5.5 0 0 0 .708 0zM1.536 7.536l-.354.353zm5-5l-.354.353zM7.5 3.5l-.354.354a.5.5 0 0 0 .708 0zm.964-.964l-.353-.354zm-.61 10.61L1.889 7.182l-.707.707l5.964 5.965zm5.257-5.964l-5.965 5.964l.708.708l5.964-5.965zM6.182 2.889l.964.965l.708-.708l-.965-.964zm1.672.965l.964-.965l-.707-.707l-.965.964zM10.964 1c-1.07 0-2.096.425-2.853 1.182l.707.707A3.04 3.04 0 0 1 10.964 2zM14 5.036c0 .805-.32 1.577-.89 2.146l.708.707A4.04 4.04 0 0 0 15 5.036zm1 0A4.036 4.036 0 0 0 10.964 1v1A3.036 3.036 0 0 1 14 5.036zM4.036 2c.805 0 1.577.32 2.146.89l.707-.708A4.04 4.04 0 0 0 4.036 1zM1 5.036A3.036 3.036 0 0 1 4.036 2V1A4.036 4.036 0 0 0 0 5.036zm.89 2.146A3.04 3.04 0 0 1 1 5.036H0c0 1.07.425 2.096 1.182 2.853z"/></svg>
React
import type { SVGProps } from "react";
export function TeenyiconsHeartOutline(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="m7.5 13.5l-.354.354a.5.5 0 0 0 .708 0zM1.536 7.536l-.354.353zm5-5l-.354.353zM7.5 3.5l-.354.354a.5.5 0 0 0 .708 0zm.964-.964l-.353-.354zm-.61 10.61L1.889 7.182l-.707.707l5.964 5.965zm5.257-5.964l-5.965 5.964l.708.708l5.964-5.965zM6.182 2.889l.964.965l.708-.708l-.965-.964zm1.672.965l.964-.965l-.707-.707l-.965.964zM10.964 1c-1.07 0-2.096.425-2.853 1.182l.707.707A3.04 3.04 0 0 1 10.964 2zM14 5.036c0 .805-.32 1.577-.89 2.146l.708.707A4.04 4.04 0 0 0 15 5.036zm1 0A4.036 4.036 0 0 0 10.964 1v1A3.036 3.036 0 0 1 14 5.036zM4.036 2c.805 0 1.577.32 2.146.89l.707-.708A4.04 4.04 0 0 0 4.036 1zM1 5.036A3.036 3.036 0 0 1 4.036 2V1A4.036 4.036 0 0 0 0 5.036zm.89 2.146A3.04 3.04 0 0 1 1 5.036H0c0 1.07.425 2.096 1.182 2.853z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="m7.5 13.5l-.354.354a.5.5 0 0 0 .708 0zM1.536 7.536l-.354.353zm5-5l-.354.353zM7.5 3.5l-.354.354a.5.5 0 0 0 .708 0zm.964-.964l-.353-.354zm-.61 10.61L1.889 7.182l-.707.707l5.964 5.965zm5.257-5.964l-5.965 5.964l.708.708l5.964-5.965zM6.182 2.889l.964.965l.708-.708l-.965-.964zm1.672.965l.964-.965l-.707-.707l-.965.964zM10.964 1c-1.07 0-2.096.425-2.853 1.182l.707.707A3.04 3.04 0 0 1 10.964 2zM14 5.036c0 .805-.32 1.577-.89 2.146l.708.707A4.04 4.04 0 0 0 15 5.036zm1 0A4.036 4.036 0 0 0 10.964 1v1A3.036 3.036 0 0 1 14 5.036zM4.036 2c.805 0 1.577.32 2.146.89l.707-.708A4.04 4.04 0 0 0 4.036 1zM1 5.036A3.036 3.036 0 0 1 4.036 2V1A4.036 4.036 0 0 0 0 5.036zm.89 2.146A3.04 3.04 0 0 1 1 5.036H0c0 1.07.425 2.096 1.182 2.853z"/></svg> </template>
CSS
.icon-heart-outline {
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%2015%2015%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m7.5%2013.5l-.354.354a.5.5%200%200%200%20.708%200zM1.536%207.536l-.354.353zm5-5l-.354.353zM7.5%203.5l-.354.354a.5.5%200%200%200%20.708%200zm.964-.964l-.353-.354zm-.61%2010.61L1.889%207.182l-.707.707l5.964%205.965zm5.257-5.964l-5.965%205.964l.708.708l5.964-5.965zM6.182%202.889l.964.965l.708-.708l-.965-.964zm1.672.965l.964-.965l-.707-.707l-.965.964zM10.964%201c-1.07%200-2.096.425-2.853%201.182l.707.707A3.04%203.04%200%200%201%2010.964%202zM14%205.036c0%20.805-.32%201.577-.89%202.146l.708.707A4.04%204.04%200%200%200%2015%205.036zm1%200A4.036%204.036%200%200%200%2010.964%201v1A3.036%203.036%200%200%201%2014%205.036zM4.036%202c.805%200%201.577.32%202.146.89l.707-.708A4.04%204.04%200%200%200%204.036%201zM1%205.036A3.036%203.036%200%200%201%204.036%202V1A4.036%204.036%200%200%200%200%205.036zm.89%202.146A3.04%203.04%200%200%201%201%205.036H0c0%201.07.425%202.096%201.182%202.853z%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%2015%2015%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m7.5%2013.5l-.354.354a.5.5%200%200%200%20.708%200zM1.536%207.536l-.354.353zm5-5l-.354.353zM7.5%203.5l-.354.354a.5.5%200%200%200%20.708%200zm.964-.964l-.353-.354zm-.61%2010.61L1.889%207.182l-.707.707l5.964%205.965zm5.257-5.964l-5.965%205.964l.708.708l5.964-5.965zM6.182%202.889l.964.965l.708-.708l-.965-.964zm1.672.965l.964-.965l-.707-.707l-.965.964zM10.964%201c-1.07%200-2.096.425-2.853%201.182l.707.707A3.04%203.04%200%200%201%2010.964%202zM14%205.036c0%20.805-.32%201.577-.89%202.146l.708.707A4.04%204.04%200%200%200%2015%205.036zm1%200A4.036%204.036%200%200%200%2010.964%201v1A3.036%203.036%200%200%201%2014%205.036zM4.036%202c.805%200%201.577.32%202.146.89l.707-.708A4.04%204.04%200%200%200%204.036%201zM1%205.036A3.036%203.036%200%200%201%204.036%202V1A4.036%204.036%200%200%200%200%205.036zm.89%202.146A3.04%203.04%200%200%201%201%205.036H0c0%201.07.425%202.096%201.182%202.853z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/teenyicons/heart-outline.svg?color=%231a73e8&size=48
