savings icon
savings-16 from Fluent UI System Color Icons by Microsoft Corporation · 16 · MIT Free for personal and commercial use.
- Name
- savings-16
- Set
- Fluent UI System Color Icons
- Style
- 16
- Viewbox
- 16×16
- License
- MIT
3 other variants in Fluent UI System Color Icons
The same icon in other sets
Use the savings icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVGDuDYfcMt)" d="M15 8.268c0 1.552-.548 2.64-1.11 3.34a4.6 4.6 0 0 1-.89.85V13.5a1.5 1.5 0 0 1-1.5 1.5H11a1 1 0 0 1-1-1H8a1 1 0 0 1-1 1h-.5A1.5 1.5 0 0 1 5 13.5v-.214c-1.363-.433-2.312-1.534-2.78-2.858a.43.43 0 0 0-.269-.281A1.31 1.31 0 0 1 1 8.89v-.794c0-.576.382-1.082.935-1.24c.104-.03.216-.13.271-.297c.346-1.046 1.069-1.81 2-2.37q.145-.088.26-.15V2.163a.76.76 0 0 1 .481-.704a.77.77 0 0 1 .826.15c.253.24.585.525.94.758c.365.238.707.39.986.418h.005C11.077 2.784 15 4.471 15 8.268"/><path fill="url(#SVGWw0K5xNZ)" d="M5.5 6.75a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0"/><path fill="#9f1459" d="M6.942 4.727a.835.835 0 0 1 1.09-.453l5.56 2.295a.835.835 0 0 1-.637 1.544l-5.56-2.296a.835.835 0 0 1-.453-1.09"/><path fill="url(#SVGqkbG7pYo)" d="M12.14 7.776a3 3 0 1 0-3.906-1.613z"/><path fill="url(#SVGCs5fnd4G)" fill-opacity=".8" d="M12.14 7.776a3 3 0 1 0-3.906-1.613z"/><defs><radialGradient id="SVGDuDYfcMt" cx="0" cy="0" r="1" gradientTransform="rotate(74.152 .833 4.867)scale(13.2972 13.6974)" gradientUnits="userSpaceOnUse"><stop stop-color="#f08af4"/><stop offset=".581" stop-color="#e869ce"/><stop offset="1" stop-color="#d7257d"/></radialGradient><radialGradient id="SVGWw0K5xNZ" cx="0" cy="0" r="1" gradientTransform="rotate(59.532 -3.375 7.091)scale(1.27093)" gradientUnits="userSpaceOnUse"><stop stop-color="#b91d6b"/><stop offset="1" stop-color="#670938"/></radialGradient><linearGradient id="SVGqkbG7pYo" x1="12.968" x2="8.03" y1="7.63" y2="3.794" gradientUnits="userSpaceOnUse"><stop stop-color="#ff8a69"/><stop offset="1" stop-color="#ffcd0f"/></linearGradient><linearGradient id="SVGCs5fnd4G" x1="11.795" x2="9.488" y1="2.361" y2="7.421" gradientUnits="userSpaceOnUse"><stop offset=".67" stop-color="#fb5937" stop-opacity="0"/><stop offset="1" stop-color="#cd3e1d"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorSavings16(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVGDuDYfcMt)" d="M15 8.268c0 1.552-.548 2.64-1.11 3.34a4.6 4.6 0 0 1-.89.85V13.5a1.5 1.5 0 0 1-1.5 1.5H11a1 1 0 0 1-1-1H8a1 1 0 0 1-1 1h-.5A1.5 1.5 0 0 1 5 13.5v-.214c-1.363-.433-2.312-1.534-2.78-2.858a.43.43 0 0 0-.269-.281A1.31 1.31 0 0 1 1 8.89v-.794c0-.576.382-1.082.935-1.24c.104-.03.216-.13.271-.297c.346-1.046 1.069-1.81 2-2.37q.145-.088.26-.15V2.163a.76.76 0 0 1 .481-.704a.77.77 0 0 1 .826.15c.253.24.585.525.94.758c.365.238.707.39.986.418h.005C11.077 2.784 15 4.471 15 8.268"/><path fill="url(#SVGWw0K5xNZ)" d="M5.5 6.75a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0"/><path fill="#9f1459" d="M6.942 4.727a.835.835 0 0 1 1.09-.453l5.56 2.295a.835.835 0 0 1-.637 1.544l-5.56-2.296a.835.835 0 0 1-.453-1.09"/><path fill="url(#SVGqkbG7pYo)" d="M12.14 7.776a3 3 0 1 0-3.906-1.613z"/><path fill="url(#SVGCs5fnd4G)" fillOpacity=".8" d="M12.14 7.776a3 3 0 1 0-3.906-1.613z"/><defs><radialGradient id="SVGDuDYfcMt" cx="0" cy="0" r="1" gradientTransform="rotate(74.152 .833 4.867)scale(13.2972 13.6974)" gradientUnits="userSpaceOnUse"><stop stopColor="#f08af4"/><stop offset=".581" stopColor="#e869ce"/><stop offset="1" stopColor="#d7257d"/></radialGradient><radialGradient id="SVGWw0K5xNZ" cx="0" cy="0" r="1" gradientTransform="rotate(59.532 -3.375 7.091)scale(1.27093)" gradientUnits="userSpaceOnUse"><stop stopColor="#b91d6b"/><stop offset="1" stopColor="#670938"/></radialGradient><linearGradient id="SVGqkbG7pYo" x1="12.968" x2="8.03" y1="7.63" y2="3.794" gradientUnits="userSpaceOnUse"><stop stopColor="#ff8a69"/><stop offset="1" stopColor="#ffcd0f"/></linearGradient><linearGradient id="SVGCs5fnd4G" x1="11.795" x2="9.488" y1="2.361" y2="7.421" gradientUnits="userSpaceOnUse"><stop offset=".67" stopColor="#fb5937" stopOpacity="0"/><stop offset="1" stopColor="#cd3e1d"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVGDuDYfcMt)" d="M15 8.268c0 1.552-.548 2.64-1.11 3.34a4.6 4.6 0 0 1-.89.85V13.5a1.5 1.5 0 0 1-1.5 1.5H11a1 1 0 0 1-1-1H8a1 1 0 0 1-1 1h-.5A1.5 1.5 0 0 1 5 13.5v-.214c-1.363-.433-2.312-1.534-2.78-2.858a.43.43 0 0 0-.269-.281A1.31 1.31 0 0 1 1 8.89v-.794c0-.576.382-1.082.935-1.24c.104-.03.216-.13.271-.297c.346-1.046 1.069-1.81 2-2.37q.145-.088.26-.15V2.163a.76.76 0 0 1 .481-.704a.77.77 0 0 1 .826.15c.253.24.585.525.94.758c.365.238.707.39.986.418h.005C11.077 2.784 15 4.471 15 8.268"/><path fill="url(#SVGWw0K5xNZ)" d="M5.5 6.75a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0"/><path fill="#9f1459" d="M6.942 4.727a.835.835 0 0 1 1.09-.453l5.56 2.295a.835.835 0 0 1-.637 1.544l-5.56-2.296a.835.835 0 0 1-.453-1.09"/><path fill="url(#SVGqkbG7pYo)" d="M12.14 7.776a3 3 0 1 0-3.906-1.613z"/><path fill="url(#SVGCs5fnd4G)" fill-opacity=".8" d="M12.14 7.776a3 3 0 1 0-3.906-1.613z"/><defs><radialGradient id="SVGDuDYfcMt" cx="0" cy="0" r="1" gradientTransform="rotate(74.152 .833 4.867)scale(13.2972 13.6974)" gradientUnits="userSpaceOnUse"><stop stop-color="#f08af4"/><stop offset=".581" stop-color="#e869ce"/><stop offset="1" stop-color="#d7257d"/></radialGradient><radialGradient id="SVGWw0K5xNZ" cx="0" cy="0" r="1" gradientTransform="rotate(59.532 -3.375 7.091)scale(1.27093)" gradientUnits="userSpaceOnUse"><stop stop-color="#b91d6b"/><stop offset="1" stop-color="#670938"/></radialGradient><linearGradient id="SVGqkbG7pYo" x1="12.968" x2="8.03" y1="7.63" y2="3.794" gradientUnits="userSpaceOnUse"><stop stop-color="#ff8a69"/><stop offset="1" stop-color="#ffcd0f"/></linearGradient><linearGradient id="SVGCs5fnd4G" x1="11.795" x2="9.488" y1="2.361" y2="7.421" gradientUnits="userSpaceOnUse"><stop offset=".67" stop-color="#fb5937" stop-opacity="0"/><stop offset="1" stop-color="#cd3e1d"/></linearGradient></defs></g></svg> </template>
CSS
.icon-savings-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%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGDuDYfcMt)%22%20d%3D%22M15%208.268c0%201.552-.548%202.64-1.11%203.34a4.6%204.6%200%200%201-.89.85V13.5a1.5%201.5%200%200%201-1.5%201.5H11a1%201%200%200%201-1-1H8a1%201%200%200%201-1%201h-.5A1.5%201.5%200%200%201%205%2013.5v-.214c-1.363-.433-2.312-1.534-2.78-2.858a.43.43%200%200%200-.269-.281A1.31%201.31%200%200%201%201%208.89v-.794c0-.576.382-1.082.935-1.24c.104-.03.216-.13.271-.297c.346-1.046%201.069-1.81%202-2.37q.145-.088.26-.15V2.163a.76.76%200%200%201%20.481-.704a.77.77%200%200%201%20.826.15c.253.24.585.525.94.758c.365.238.707.39.986.418h.005C11.077%202.784%2015%204.471%2015%208.268%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGWw0K5xNZ)%22%20d%3D%22M5.5%206.75a.75.75%200%201%201-1.5%200a.75.75%200%200%201%201.5%200%22%2F%3E%3Cpath%20fill%3D%22%239f1459%22%20d%3D%22M6.942%204.727a.835.835%200%200%201%201.09-.453l5.56%202.295a.835.835%200%200%201-.637%201.544l-5.56-2.296a.835.835%200%200%201-.453-1.09%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGqkbG7pYo)%22%20d%3D%22M12.14%207.776a3%203%200%201%200-3.906-1.613z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGCs5fnd4G)%22%20fill-opacity%3D%22.8%22%20d%3D%22M12.14%207.776a3%203%200%201%200-3.906-1.613z%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGDuDYfcMt%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(74.152%20.833%204.867)scale(13.2972%2013.6974)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23f08af4%22%2F%3E%3Cstop%20offset%3D%22.581%22%20stop-color%3D%22%23e869ce%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d7257d%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGWw0K5xNZ%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(59.532%20-3.375%207.091)scale(1.27093)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23b91d6b%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23670938%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22SVGqkbG7pYo%22%20x1%3D%2212.968%22%20x2%3D%228.03%22%20y1%3D%227.63%22%20y2%3D%223.794%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ff8a69%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffcd0f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGCs5fnd4G%22%20x1%3D%2211.795%22%20x2%3D%229.488%22%20y1%3D%222.361%22%20y2%3D%227.421%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.67%22%20stop-color%3D%22%23fb5937%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cd3e1d%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%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%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGDuDYfcMt)%22%20d%3D%22M15%208.268c0%201.552-.548%202.64-1.11%203.34a4.6%204.6%200%200%201-.89.85V13.5a1.5%201.5%200%200%201-1.5%201.5H11a1%201%200%200%201-1-1H8a1%201%200%200%201-1%201h-.5A1.5%201.5%200%200%201%205%2013.5v-.214c-1.363-.433-2.312-1.534-2.78-2.858a.43.43%200%200%200-.269-.281A1.31%201.31%200%200%201%201%208.89v-.794c0-.576.382-1.082.935-1.24c.104-.03.216-.13.271-.297c.346-1.046%201.069-1.81%202-2.37q.145-.088.26-.15V2.163a.76.76%200%200%201%20.481-.704a.77.77%200%200%201%20.826.15c.253.24.585.525.94.758c.365.238.707.39.986.418h.005C11.077%202.784%2015%204.471%2015%208.268%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGWw0K5xNZ)%22%20d%3D%22M5.5%206.75a.75.75%200%201%201-1.5%200a.75.75%200%200%201%201.5%200%22%2F%3E%3Cpath%20fill%3D%22%239f1459%22%20d%3D%22M6.942%204.727a.835.835%200%200%201%201.09-.453l5.56%202.295a.835.835%200%200%201-.637%201.544l-5.56-2.296a.835.835%200%200%201-.453-1.09%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGqkbG7pYo)%22%20d%3D%22M12.14%207.776a3%203%200%201%200-3.906-1.613z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGCs5fnd4G)%22%20fill-opacity%3D%22.8%22%20d%3D%22M12.14%207.776a3%203%200%201%200-3.906-1.613z%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGDuDYfcMt%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(74.152%20.833%204.867)scale(13.2972%2013.6974)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23f08af4%22%2F%3E%3Cstop%20offset%3D%22.581%22%20stop-color%3D%22%23e869ce%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d7257d%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGWw0K5xNZ%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(59.532%20-3.375%207.091)scale(1.27093)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23b91d6b%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23670938%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22SVGqkbG7pYo%22%20x1%3D%2212.968%22%20x2%3D%228.03%22%20y1%3D%227.63%22%20y2%3D%223.794%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ff8a69%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffcd0f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGCs5fnd4G%22%20x1%3D%2211.795%22%20x2%3D%229.488%22%20y1%3D%222.361%22%20y2%3D%227.421%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.67%22%20stop-color%3D%22%23fb5937%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cd3e1d%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/savings-16.svg?color=%231a73e8&size=48
