favorite icon
favorite-outline-rounded from Material Symbols Light by Google · Outline Rounded · UI Actions · Apache-2.0 Free for personal and commercial use.
- Name
- favorite-outline-rounded
- Set
- Material Symbols Light
- Style
- Outline Rounded
- Category
- UI Actions
- Viewbox
- 24×24
- License
- Apache 2.0
3 other variants in Material Symbols Light
The same icon in other sets
More ui actions icons from Material Symbols Light
Use the favorite icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11.403 18.989q-.286-.106-.503-.324L9.752 17.63q-2.67-2.425-4.71-4.717Q3 10.622 3 8.15q0-1.908 1.296-3.204T7.5 3.65q1.094 0 2.279.553T12 6.289q1.037-1.533 2.221-2.086T16.5 3.65q1.908 0 3.204 1.296T21 8.15q0 2.529-2.125 4.862t-4.652 4.622l-1.142 1.031q-.218.218-.513.323t-.587.106t-.578-.106m.108-11.661q-.898-1.448-1.867-2.063Q8.675 4.65 7.5 4.65q-1.5 0-2.5 1t-1 2.5q0 1.108.627 2.272q.627 1.165 1.684 2.386q1.056 1.22 2.429 2.498q1.371 1.277 2.856 2.629q.173.154.404.154t.404-.154q1.485-1.352 2.857-2.63q1.372-1.276 2.429-2.497q1.056-1.222 1.683-2.386T20 8.15q0-1.5-1-2.5t-2.5-1q-1.175 0-2.144.615q-.97.614-1.867 2.062q-.08.135-.214.202T12 7.596t-.275-.067t-.213-.202M12 11.398"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsLightFavoriteOutlineRounded(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11.403 18.989q-.286-.106-.503-.324L9.752 17.63q-2.67-2.425-4.71-4.717Q3 10.622 3 8.15q0-1.908 1.296-3.204T7.5 3.65q1.094 0 2.279.553T12 6.289q1.037-1.533 2.221-2.086T16.5 3.65q1.908 0 3.204 1.296T21 8.15q0 2.529-2.125 4.862t-4.652 4.622l-1.142 1.031q-.218.218-.513.323t-.587.106t-.578-.106m.108-11.661q-.898-1.448-1.867-2.063Q8.675 4.65 7.5 4.65q-1.5 0-2.5 1t-1 2.5q0 1.108.627 2.272q.627 1.165 1.684 2.386q1.056 1.22 2.429 2.498q1.371 1.277 2.856 2.629q.173.154.404.154t.404-.154q1.485-1.352 2.857-2.63q1.372-1.276 2.429-2.497q1.056-1.222 1.683-2.386T20 8.15q0-1.5-1-2.5t-2.5-1q-1.175 0-2.144.615q-.97.614-1.867 2.062q-.08.135-.214.202T12 7.596t-.275-.067t-.213-.202M12 11.398"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11.403 18.989q-.286-.106-.503-.324L9.752 17.63q-2.67-2.425-4.71-4.717Q3 10.622 3 8.15q0-1.908 1.296-3.204T7.5 3.65q1.094 0 2.279.553T12 6.289q1.037-1.533 2.221-2.086T16.5 3.65q1.908 0 3.204 1.296T21 8.15q0 2.529-2.125 4.862t-4.652 4.622l-1.142 1.031q-.218.218-.513.323t-.587.106t-.578-.106m.108-11.661q-.898-1.448-1.867-2.063Q8.675 4.65 7.5 4.65q-1.5 0-2.5 1t-1 2.5q0 1.108.627 2.272q.627 1.165 1.684 2.386q1.056 1.22 2.429 2.498q1.371 1.277 2.856 2.629q.173.154.404.154t.404-.154q1.485-1.352 2.857-2.63q1.372-1.276 2.429-2.497q1.056-1.222 1.683-2.386T20 8.15q0-1.5-1-2.5t-2.5-1q-1.175 0-2.144.615q-.97.614-1.867 2.062q-.08.135-.214.202T12 7.596t-.275-.067t-.213-.202M12 11.398"/></svg> </template>
CSS
.icon-favorite-outline-rounded {
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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M11.403%2018.989q-.286-.106-.503-.324L9.752%2017.63q-2.67-2.425-4.71-4.717Q3%2010.622%203%208.15q0-1.908%201.296-3.204T7.5%203.65q1.094%200%202.279.553T12%206.289q1.037-1.533%202.221-2.086T16.5%203.65q1.908%200%203.204%201.296T21%208.15q0%202.529-2.125%204.862t-4.652%204.622l-1.142%201.031q-.218.218-.513.323t-.587.106t-.578-.106m.108-11.661q-.898-1.448-1.867-2.063Q8.675%204.65%207.5%204.65q-1.5%200-2.5%201t-1%202.5q0%201.108.627%202.272q.627%201.165%201.684%202.386q1.056%201.22%202.429%202.498q1.371%201.277%202.856%202.629q.173.154.404.154t.404-.154q1.485-1.352%202.857-2.63q1.372-1.276%202.429-2.497q1.056-1.222%201.683-2.386T20%208.15q0-1.5-1-2.5t-2.5-1q-1.175%200-2.144.615q-.97.614-1.867%202.062q-.08.135-.214.202T12%207.596t-.275-.067t-.213-.202M12%2011.398%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M11.403%2018.989q-.286-.106-.503-.324L9.752%2017.63q-2.67-2.425-4.71-4.717Q3%2010.622%203%208.15q0-1.908%201.296-3.204T7.5%203.65q1.094%200%202.279.553T12%206.289q1.037-1.533%202.221-2.086T16.5%203.65q1.908%200%203.204%201.296T21%208.15q0%202.529-2.125%204.862t-4.652%204.622l-1.142%201.031q-.218.218-.513.323t-.587.106t-.578-.106m.108-11.661q-.898-1.448-1.867-2.063Q8.675%204.65%207.5%204.65q-1.5%200-2.5%201t-1%202.5q0%201.108.627%202.272q.627%201.165%201.684%202.386q1.056%201.22%202.429%202.498q1.371%201.277%202.856%202.629q.173.154.404.154t.404-.154q1.485-1.352%202.857-2.63q1.372-1.276%202.429-2.497q1.056-1.222%201.683-2.386T20%208.15q0-1.5-1-2.5t-2.5-1q-1.175%200-2.144.615q-.97.614-1.867%202.062q-.08.135-.214.202T12%207.596t-.275-.067t-.213-.202M12%2011.398%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/favorite-outline-rounded.svg?color=%231a73e8&size=48
