gift top icon
gift-top-solid from HeroIcons by Refactoring UI Inc · Solid 24x24 · MIT Free for personal and commercial use.
- Name
- gift-top-solid
- Set
- HeroIcons
- Style
- Solid 24x24
- Viewbox
- 24×24
- License
- MIT
3 other variants in HeroIcons
Use the gift top icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M11.25 3v4.046a3 3 0 0 0-4.277 4.204H1.5v-6A2.25 2.25 0 0 1 3.75 3zm1.5 0v4.011a3 3 0 0 1 4.239 4.239H22.5v-6A2.25 2.25 0 0 0 20.25 3zm9.75 9.75h-8.983a4.125 4.125 0 0 0 4.108 3.75a.75.75 0 0 1 0 1.5a5.62 5.62 0 0 1-4.875-2.817V21h7.5a2.25 2.25 0 0 0 2.25-2.25zM11.25 21v-5.817A5.62 5.62 0 0 1 6.375 18a.75.75 0 0 1 0-1.5a4.126 4.126 0 0 0 4.108-3.75H1.5v6A2.25 2.25 0 0 0 3.75 21z"/><path d="M11.086 10.354c.03.297.037.575.035.805a8 8 0 0 1-.805-.036c-.833-.084-1.677-.325-2.195-.843a1.5 1.5 0 0 1 2.122-2.12c.517.517.759 1.36.842 2.194m1.792 0c-.03.297-.038.575-.036.805c.23.002.508-.006.805-.036c.833-.084 1.677-.325 2.195-.843a1.5 1.5 0 0 0-2.121-2.12c-.518.518-.76 1.362-.843 2.194"/></g></svg>
React
import type { SVGProps } from "react";
export function HeroiconsGiftTopSolid(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M11.25 3v4.046a3 3 0 0 0-4.277 4.204H1.5v-6A2.25 2.25 0 0 1 3.75 3zm1.5 0v4.011a3 3 0 0 1 4.239 4.239H22.5v-6A2.25 2.25 0 0 0 20.25 3zm9.75 9.75h-8.983a4.125 4.125 0 0 0 4.108 3.75a.75.75 0 0 1 0 1.5a5.62 5.62 0 0 1-4.875-2.817V21h7.5a2.25 2.25 0 0 0 2.25-2.25zM11.25 21v-5.817A5.62 5.62 0 0 1 6.375 18a.75.75 0 0 1 0-1.5a4.126 4.126 0 0 0 4.108-3.75H1.5v6A2.25 2.25 0 0 0 3.75 21z"/><path d="M11.086 10.354c.03.297.037.575.035.805a8 8 0 0 1-.805-.036c-.833-.084-1.677-.325-2.195-.843a1.5 1.5 0 0 1 2.122-2.12c.517.517.759 1.36.842 2.194m1.792 0c-.03.297-.038.575-.036.805c.23.002.508-.006.805-.036c.833-.084 1.677-.325 2.195-.843a1.5 1.5 0 0 0-2.121-2.12c-.518.518-.76 1.362-.843 2.194"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M11.25 3v4.046a3 3 0 0 0-4.277 4.204H1.5v-6A2.25 2.25 0 0 1 3.75 3zm1.5 0v4.011a3 3 0 0 1 4.239 4.239H22.5v-6A2.25 2.25 0 0 0 20.25 3zm9.75 9.75h-8.983a4.125 4.125 0 0 0 4.108 3.75a.75.75 0 0 1 0 1.5a5.62 5.62 0 0 1-4.875-2.817V21h7.5a2.25 2.25 0 0 0 2.25-2.25zM11.25 21v-5.817A5.62 5.62 0 0 1 6.375 18a.75.75 0 0 1 0-1.5a4.126 4.126 0 0 0 4.108-3.75H1.5v6A2.25 2.25 0 0 0 3.75 21z"/><path d="M11.086 10.354c.03.297.037.575.035.805a8 8 0 0 1-.805-.036c-.833-.084-1.677-.325-2.195-.843a1.5 1.5 0 0 1 2.122-2.12c.517.517.759 1.36.842 2.194m1.792 0c-.03.297-.038.575-.036.805c.23.002.508-.006.805-.036c.833-.084 1.677-.325 2.195-.843a1.5 1.5 0 0 0-2.121-2.12c-.518.518-.76 1.362-.843 2.194"/></g></svg> </template>
CSS
.icon-gift-top-solid {
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%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M11.25%203v4.046a3%203%200%200%200-4.277%204.204H1.5v-6A2.25%202.25%200%200%201%203.75%203zm1.5%200v4.011a3%203%200%200%201%204.239%204.239H22.5v-6A2.25%202.25%200%200%200%2020.25%203zm9.75%209.75h-8.983a4.125%204.125%200%200%200%204.108%203.75a.75.75%200%200%201%200%201.5a5.62%205.62%200%200%201-4.875-2.817V21h7.5a2.25%202.25%200%200%200%202.25-2.25zM11.25%2021v-5.817A5.62%205.62%200%200%201%206.375%2018a.75.75%200%200%201%200-1.5a4.126%204.126%200%200%200%204.108-3.75H1.5v6A2.25%202.25%200%200%200%203.75%2021z%22%2F%3E%3Cpath%20d%3D%22M11.086%2010.354c.03.297.037.575.035.805a8%208%200%200%201-.805-.036c-.833-.084-1.677-.325-2.195-.843a1.5%201.5%200%200%201%202.122-2.12c.517.517.759%201.36.842%202.194m1.792%200c-.03.297-.038.575-.036.805c.23.002.508-.006.805-.036c.833-.084%201.677-.325%202.195-.843a1.5%201.5%200%200%200-2.121-2.12c-.518.518-.76%201.362-.843%202.194%22%2F%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%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M11.25%203v4.046a3%203%200%200%200-4.277%204.204H1.5v-6A2.25%202.25%200%200%201%203.75%203zm1.5%200v4.011a3%203%200%200%201%204.239%204.239H22.5v-6A2.25%202.25%200%200%200%2020.25%203zm9.75%209.75h-8.983a4.125%204.125%200%200%200%204.108%203.75a.75.75%200%200%201%200%201.5a5.62%205.62%200%200%201-4.875-2.817V21h7.5a2.25%202.25%200%200%200%202.25-2.25zM11.25%2021v-5.817A5.62%205.62%200%200%201%206.375%2018a.75.75%200%200%201%200-1.5a4.126%204.126%200%200%200%204.108-3.75H1.5v6A2.25%202.25%200%200%200%203.75%2021z%22%2F%3E%3Cpath%20d%3D%22M11.086%2010.354c.03.297.037.575.035.805a8%208%200%200%201-.805-.036c-.833-.084-1.677-.325-2.195-.843a1.5%201.5%200%200%201%202.122-2.12c.517.517.759%201.36.842%202.194m1.792%200c-.03.297-.038.575-.036.805c.23.002.508-.006.805-.036c.833-.084%201.677-.325%202.195-.843a1.5%201.5%200%200%200-2.121-2.12c-.518.518-.76%201.362-.843%202.194%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/heroicons/gift-top-solid.svg?color=%231a73e8&size=48
