heart icon
heart-16 from Octicons by GitHub · 16 · MIT Free for personal and commercial use.
- Name
- heart-16
- Set
- Octicons
- Style
- 16
- Viewbox
- 16×16
- License
- MIT
2 other variants in Octicons
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 Octicons
Use the heart icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="m8 14.25l.345.666a.75.75 0 0 1-.69 0l-.008-.004l-.018-.01a7 7 0 0 1-.31-.17a22 22 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5C0 2.836 2.086 1 4.25 1C5.797 1 7.153 1.802 8 3.02C8.847 1.802 10.203 1 11.75 1C13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22 22 0 0 1-3.744 2.584l-.018.01l-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3c0 2.15 1.58 4.144 3.365 5.682A20.6 20.6 0 0 0 8 13.393a20.6 20.6 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3c-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5"/></svg>
React
import type { SVGProps } from "react";
export function OcticonHeart16(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="m8 14.25l.345.666a.75.75 0 0 1-.69 0l-.008-.004l-.018-.01a7 7 0 0 1-.31-.17a22 22 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5C0 2.836 2.086 1 4.25 1C5.797 1 7.153 1.802 8 3.02C8.847 1.802 10.203 1 11.75 1C13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22 22 0 0 1-3.744 2.584l-.018.01l-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3c0 2.15 1.58 4.144 3.365 5.682A20.6 20.6 0 0 0 8 13.393a20.6 20.6 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3c-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="m8 14.25l.345.666a.75.75 0 0 1-.69 0l-.008-.004l-.018-.01a7 7 0 0 1-.31-.17a22 22 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5C0 2.836 2.086 1 4.25 1C5.797 1 7.153 1.802 8 3.02C8.847 1.802 10.203 1 11.75 1C13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22 22 0 0 1-3.744 2.584l-.018.01l-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3c0 2.15 1.58 4.144 3.365 5.682A20.6 20.6 0 0 0 8 13.393a20.6 20.6 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3c-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5"/></svg> </template>
CSS
.icon-heart-16 {
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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m8%2014.25l.345.666a.75.75%200%200%201-.69%200l-.008-.004l-.018-.01a7%207%200%200%201-.31-.17a22%2022%200%200%201-3.434-2.414C2.045%2010.731%200%208.35%200%205.5C0%202.836%202.086%201%204.25%201C5.797%201%207.153%201.802%208%203.02C8.847%201.802%2010.203%201%2011.75%201C13.914%201%2016%202.836%2016%205.5c0%202.85-2.045%205.231-3.885%206.818a22%2022%200%200%201-3.744%202.584l-.018.01l-.006.003h-.002ZM4.25%202.5c-1.336%200-2.75%201.164-2.75%203c0%202.15%201.58%204.144%203.365%205.682A20.6%2020.6%200%200%200%208%2013.393a20.6%2020.6%200%200%200%203.135-2.211C12.92%209.644%2014.5%207.65%2014.5%205.5c0-1.836-1.414-3-2.75-3c-1.373%200-2.609.986-3.029%202.456a.749.749%200%200%201-1.442%200C6.859%203.486%205.623%202.5%204.25%202.5%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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m8%2014.25l.345.666a.75.75%200%200%201-.69%200l-.008-.004l-.018-.01a7%207%200%200%201-.31-.17a22%2022%200%200%201-3.434-2.414C2.045%2010.731%200%208.35%200%205.5C0%202.836%202.086%201%204.25%201C5.797%201%207.153%201.802%208%203.02C8.847%201.802%2010.203%201%2011.75%201C13.914%201%2016%202.836%2016%205.5c0%202.85-2.045%205.231-3.885%206.818a22%2022%200%200%201-3.744%202.584l-.018.01l-.006.003h-.002ZM4.25%202.5c-1.336%200-2.75%201.164-2.75%203c0%202.15%201.58%204.144%203.365%205.682A20.6%2020.6%200%200%200%208%2013.393a20.6%2020.6%200%200%200%203.135-2.211C12.92%209.644%2014.5%207.65%2014.5%205.5c0-1.836-1.414-3-2.75-3c-1.373%200-2.609.986-3.029%202.456a.749.749%200%200%201-1.442%200C6.859%203.486%205.623%202.5%204.25%202.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/octicon/heart-16.svg?color=%231a73e8&size=48
