settings heart icon
settings-heart-rounded from Material Symbols by Google · Rounded · UI Actions · Apache-2.0 Free for personal and commercial use.
- Name
- settings-heart-rounded
- Set
- Material Symbols
- Style
- Rounded
- Category
- UI Actions
- Viewbox
- 24×24
- License
- Apache 2.0
3 other variants in Material Symbols
The same icon in other sets
More ui actions icons from Material Symbols
Use the settings heart icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10.825 22q-.675 0-1.162-.45t-.588-1.1L8.85 18.8q-.325-.125-.612-.3t-.563-.375l-1.55.65q-.625.275-1.25.05t-.975-.8l-1.175-2.05q-.35-.575-.2-1.225t.675-1.075l1.325-1Q4.5 12.5 4.5 12.337v-.675q0-.162.025-.337l-1.325-1Q2.675 9.9 2.525 9.25t.2-1.225L3.9 5.975q.35-.575.975-.8t1.25.05l1.55.65q.275-.2.575-.375t.6-.3l.225-1.65q.1-.65.588-1.1T10.825 2h2.35q.675 0 1.163.45t.587 1.1l.225 1.65q.325.125.613.3t.562.375l1.55-.65q.625-.275 1.25-.05t.975.8l1.175 2.05q.35.575.2 1.225t-.675 1.075l-1.325 1q.025.175.025.338v.674q0 .163-.05.338l1.325 1q.525.425.675 1.075t-.2 1.225l-1.2 2.05q-.35.575-.975.8t-1.25-.05l-1.5-.65q-.275.2-.575.375t-.6.3l-.225 1.65q-.1.65-.587 1.1t-1.163.45zm1.6-6.488q.175-.062.325-.212l2.8-2.8q.425-.425.55-1.038t-.125-1.187t-.75-.925T14.1 9t-1.125.387t-.925.813q-.45-.425-.937-.813T10 9t-1.137.338t-.763.912t-.112 1.188t.562 1.062l2.775 2.8q.15.15.338.213t.387.062t.375-.062"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsSettingsHeartRounded(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="M10.825 22q-.675 0-1.162-.45t-.588-1.1L8.85 18.8q-.325-.125-.612-.3t-.563-.375l-1.55.65q-.625.275-1.25.05t-.975-.8l-1.175-2.05q-.35-.575-.2-1.225t.675-1.075l1.325-1Q4.5 12.5 4.5 12.337v-.675q0-.162.025-.337l-1.325-1Q2.675 9.9 2.525 9.25t.2-1.225L3.9 5.975q.35-.575.975-.8t1.25.05l1.55.65q.275-.2.575-.375t.6-.3l.225-1.65q.1-.65.588-1.1T10.825 2h2.35q.675 0 1.163.45t.587 1.1l.225 1.65q.325.125.613.3t.562.375l1.55-.65q.625-.275 1.25-.05t.975.8l1.175 2.05q.35.575.2 1.225t-.675 1.075l-1.325 1q.025.175.025.338v.674q0 .163-.05.338l1.325 1q.525.425.675 1.075t-.2 1.225l-1.2 2.05q-.35.575-.975.8t-1.25-.05l-1.5-.65q-.275.2-.575.375t-.6.3l-.225 1.65q-.1.65-.587 1.1t-1.163.45zm1.6-6.488q.175-.062.325-.212l2.8-2.8q.425-.425.55-1.038t-.125-1.187t-.75-.925T14.1 9t-1.125.387t-.925.813q-.45-.425-.937-.813T10 9t-1.137.338t-.763.912t-.112 1.188t.562 1.062l2.775 2.8q.15.15.338.213t.387.062t.375-.062"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10.825 22q-.675 0-1.162-.45t-.588-1.1L8.85 18.8q-.325-.125-.612-.3t-.563-.375l-1.55.65q-.625.275-1.25.05t-.975-.8l-1.175-2.05q-.35-.575-.2-1.225t.675-1.075l1.325-1Q4.5 12.5 4.5 12.337v-.675q0-.162.025-.337l-1.325-1Q2.675 9.9 2.525 9.25t.2-1.225L3.9 5.975q.35-.575.975-.8t1.25.05l1.55.65q.275-.2.575-.375t.6-.3l.225-1.65q.1-.65.588-1.1T10.825 2h2.35q.675 0 1.163.45t.587 1.1l.225 1.65q.325.125.613.3t.562.375l1.55-.65q.625-.275 1.25-.05t.975.8l1.175 2.05q.35.575.2 1.225t-.675 1.075l-1.325 1q.025.175.025.338v.674q0 .163-.05.338l1.325 1q.525.425.675 1.075t-.2 1.225l-1.2 2.05q-.35.575-.975.8t-1.25-.05l-1.5-.65q-.275.2-.575.375t-.6.3l-.225 1.65q-.1.65-.587 1.1t-1.163.45zm1.6-6.488q.175-.062.325-.212l2.8-2.8q.425-.425.55-1.038t-.125-1.187t-.75-.925T14.1 9t-1.125.387t-.925.813q-.45-.425-.937-.813T10 9t-1.137.338t-.763.912t-.112 1.188t.562 1.062l2.775 2.8q.15.15.338.213t.387.062t.375-.062"/></svg> </template>
CSS
.icon-settings-heart-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%22M10.825%2022q-.675%200-1.162-.45t-.588-1.1L8.85%2018.8q-.325-.125-.612-.3t-.563-.375l-1.55.65q-.625.275-1.25.05t-.975-.8l-1.175-2.05q-.35-.575-.2-1.225t.675-1.075l1.325-1Q4.5%2012.5%204.5%2012.337v-.675q0-.162.025-.337l-1.325-1Q2.675%209.9%202.525%209.25t.2-1.225L3.9%205.975q.35-.575.975-.8t1.25.05l1.55.65q.275-.2.575-.375t.6-.3l.225-1.65q.1-.65.588-1.1T10.825%202h2.35q.675%200%201.163.45t.587%201.1l.225%201.65q.325.125.613.3t.562.375l1.55-.65q.625-.275%201.25-.05t.975.8l1.175%202.05q.35.575.2%201.225t-.675%201.075l-1.325%201q.025.175.025.338v.674q0%20.163-.05.338l1.325%201q.525.425.675%201.075t-.2%201.225l-1.2%202.05q-.35.575-.975.8t-1.25-.05l-1.5-.65q-.275.2-.575.375t-.6.3l-.225%201.65q-.1.65-.587%201.1t-1.163.45zm1.6-6.488q.175-.062.325-.212l2.8-2.8q.425-.425.55-1.038t-.125-1.187t-.75-.925T14.1%209t-1.125.387t-.925.813q-.45-.425-.937-.813T10%209t-1.137.338t-.763.912t-.112%201.188t.562%201.062l2.775%202.8q.15.15.338.213t.387.062t.375-.062%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%22M10.825%2022q-.675%200-1.162-.45t-.588-1.1L8.85%2018.8q-.325-.125-.612-.3t-.563-.375l-1.55.65q-.625.275-1.25.05t-.975-.8l-1.175-2.05q-.35-.575-.2-1.225t.675-1.075l1.325-1Q4.5%2012.5%204.5%2012.337v-.675q0-.162.025-.337l-1.325-1Q2.675%209.9%202.525%209.25t.2-1.225L3.9%205.975q.35-.575.975-.8t1.25.05l1.55.65q.275-.2.575-.375t.6-.3l.225-1.65q.1-.65.588-1.1T10.825%202h2.35q.675%200%201.163.45t.587%201.1l.225%201.65q.325.125.613.3t.562.375l1.55-.65q.625-.275%201.25-.05t.975.8l1.175%202.05q.35.575.2%201.225t-.675%201.075l-1.325%201q.025.175.025.338v.674q0%20.163-.05.338l1.325%201q.525.425.675%201.075t-.2%201.225l-1.2%202.05q-.35.575-.975.8t-1.25-.05l-1.5-.65q-.275.2-.575.375t-.6.3l-.225%201.65q-.1.65-.587%201.1t-1.163.45zm1.6-6.488q.175-.062.325-.212l2.8-2.8q.425-.425.55-1.038t-.125-1.187t-.75-.925T14.1%209t-1.125.387t-.925.813q-.45-.425-.937-.813T10%209t-1.137.338t-.763.912t-.112%201.188t.562%201.062l2.775%202.8q.15.15.338.213t.387.062t.375-.062%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols/settings-heart-rounded.svg?color=%231a73e8&size=48
