confetti icon
confetti-bold from Phosphor by Phosphor Icons · Bold · MIT Free for personal and commercial use.
- Name
- confetti-bold
- Set
- Phosphor
- Style
- Bold
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
Use the confetti icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M114.32 49.8a19.79 19.79 0 0 0-32.6 7.2l-52.5 144.41A19.82 19.82 0 0 0 47.75 228a20 20 0 0 0 6.84-1.22L199 174.28a19.79 19.79 0 0 0 7.24-32.6Zm-10.13 133.41l-31.4-31.4l10.15-27.91l49.16 49.16Zm-40.42-6.51l15.53 15.56l-24.45 8.89ZM157 164L92 99l10-27.58L184.57 154ZM128 40V16a12 12 0 0 1 24 0v24a12 12 0 0 1-24 0m116.48 83.51a12 12 0 0 1-17 17l-16-16a12 12 0 0 1 17-17Zm-.69-40.13l-24 8a12 12 0 0 1-7.59-22.77l24-8a12 12 0 1 1 7.59 22.77M156.6 65.93C159.83 47.47 173.39 36 192 36c6.45 0 8.69-2.49 10-4.92a18 18 0 0 0 2-7.22V24a12 12 0 0 1 24 0c0 14.47-9.59 36-36 36c-4.94 0-10.21 1.19-11.76 10.06A12 12 0 0 1 168.43 80a12.4 12.4 0 0 1-2.08-.18a12 12 0 0 1-9.75-13.89"/></svg>
React
import type { SVGProps } from "react";
export function PhConfettiBold(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M114.32 49.8a19.79 19.79 0 0 0-32.6 7.2l-52.5 144.41A19.82 19.82 0 0 0 47.75 228a20 20 0 0 0 6.84-1.22L199 174.28a19.79 19.79 0 0 0 7.24-32.6Zm-10.13 133.41l-31.4-31.4l10.15-27.91l49.16 49.16Zm-40.42-6.51l15.53 15.56l-24.45 8.89ZM157 164L92 99l10-27.58L184.57 154ZM128 40V16a12 12 0 0 1 24 0v24a12 12 0 0 1-24 0m116.48 83.51a12 12 0 0 1-17 17l-16-16a12 12 0 0 1 17-17Zm-.69-40.13l-24 8a12 12 0 0 1-7.59-22.77l24-8a12 12 0 1 1 7.59 22.77M156.6 65.93C159.83 47.47 173.39 36 192 36c6.45 0 8.69-2.49 10-4.92a18 18 0 0 0 2-7.22V24a12 12 0 0 1 24 0c0 14.47-9.59 36-36 36c-4.94 0-10.21 1.19-11.76 10.06A12 12 0 0 1 168.43 80a12.4 12.4 0 0 1-2.08-.18a12 12 0 0 1-9.75-13.89"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M114.32 49.8a19.79 19.79 0 0 0-32.6 7.2l-52.5 144.41A19.82 19.82 0 0 0 47.75 228a20 20 0 0 0 6.84-1.22L199 174.28a19.79 19.79 0 0 0 7.24-32.6Zm-10.13 133.41l-31.4-31.4l10.15-27.91l49.16 49.16Zm-40.42-6.51l15.53 15.56l-24.45 8.89ZM157 164L92 99l10-27.58L184.57 154ZM128 40V16a12 12 0 0 1 24 0v24a12 12 0 0 1-24 0m116.48 83.51a12 12 0 0 1-17 17l-16-16a12 12 0 0 1 17-17Zm-.69-40.13l-24 8a12 12 0 0 1-7.59-22.77l24-8a12 12 0 1 1 7.59 22.77M156.6 65.93C159.83 47.47 173.39 36 192 36c6.45 0 8.69-2.49 10-4.92a18 18 0 0 0 2-7.22V24a12 12 0 0 1 24 0c0 14.47-9.59 36-36 36c-4.94 0-10.21 1.19-11.76 10.06A12 12 0 0 1 168.43 80a12.4 12.4 0 0 1-2.08-.18a12 12 0 0 1-9.75-13.89"/></svg> </template>
CSS
.icon-confetti-bold {
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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M114.32%2049.8a19.79%2019.79%200%200%200-32.6%207.2l-52.5%20144.41A19.82%2019.82%200%200%200%2047.75%20228a20%2020%200%200%200%206.84-1.22L199%20174.28a19.79%2019.79%200%200%200%207.24-32.6Zm-10.13%20133.41l-31.4-31.4l10.15-27.91l49.16%2049.16Zm-40.42-6.51l15.53%2015.56l-24.45%208.89ZM157%20164L92%2099l10-27.58L184.57%20154ZM128%2040V16a12%2012%200%200%201%2024%200v24a12%2012%200%200%201-24%200m116.48%2083.51a12%2012%200%200%201-17%2017l-16-16a12%2012%200%200%201%2017-17Zm-.69-40.13l-24%208a12%2012%200%200%201-7.59-22.77l24-8a12%2012%200%201%201%207.59%2022.77M156.6%2065.93C159.83%2047.47%20173.39%2036%20192%2036c6.45%200%208.69-2.49%2010-4.92a18%2018%200%200%200%202-7.22V24a12%2012%200%200%201%2024%200c0%2014.47-9.59%2036-36%2036c-4.94%200-10.21%201.19-11.76%2010.06A12%2012%200%200%201%20168.43%2080a12.4%2012.4%200%200%201-2.08-.18a12%2012%200%200%201-9.75-13.89%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M114.32%2049.8a19.79%2019.79%200%200%200-32.6%207.2l-52.5%20144.41A19.82%2019.82%200%200%200%2047.75%20228a20%2020%200%200%200%206.84-1.22L199%20174.28a19.79%2019.79%200%200%200%207.24-32.6Zm-10.13%20133.41l-31.4-31.4l10.15-27.91l49.16%2049.16Zm-40.42-6.51l15.53%2015.56l-24.45%208.89ZM157%20164L92%2099l10-27.58L184.57%20154ZM128%2040V16a12%2012%200%200%201%2024%200v24a12%2012%200%200%201-24%200m116.48%2083.51a12%2012%200%200%201-17%2017l-16-16a12%2012%200%200%201%2017-17Zm-.69-40.13l-24%208a12%2012%200%200%201-7.59-22.77l24-8a12%2012%200%201%201%207.59%2022.77M156.6%2065.93C159.83%2047.47%20173.39%2036%20192%2036c6.45%200%208.69-2.49%2010-4.92a18%2018%200%200%200%202-7.22V24a12%2012%200%200%201%2024%200c0%2014.47-9.59%2036-36%2036c-4.94%200-10.21%201.19-11.76%2010.06A12%2012%200%200%201%20168.43%2080a12.4%2012.4%200%200%201-2.08-.18a12%2012%200%200%201-9.75-13.89%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/confetti-bold.svg?color=%231a73e8&size=48
