balloon icon
balloon-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.
- Name
- balloon-thin
- Set
- Phosphor
- Style
- Thin
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
balloonBootstrap IconsballoonBoxIcons v2 SolidballoonEmoji One (Colored)balloon-12-filledFluent UI System IconsballoonFluent EmojiballoonFluent Emoji FlatballoonFluent Emoji High ContrastballoonFirefox OS EmojiballoonHuge IconsballoonIonIconsballoonLucideballoonMaterial Design IconsballoonNoto EmojiballoonOpenMojiballoonPixelarticonsballoon-boldSolarballoonStreamline EmojisballoonTabler IconsballoonTwitter Emoji
Use the balloon icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 20a84.09 84.09 0 0 0-84 84c0 22.57 9.08 47.63 24.28 67c12.68 16.17 28 26.81 44.22 31l-12.18 28.4A4 4 0 0 0 104 236h48a4 4 0 0 0 3.68-5.58L143.5 202c16.23-4.17 31.54-14.81 44.22-31c15.2-19.41 24.28-44.47 24.28-67a84.09 84.09 0 0 0-84-84m17.93 208h-35.86l10.48-24.46a60.6 60.6 0 0 0 14.9 0ZM128 196c-42.1 0-76-50.33-76-92a76 76 0 0 1 152 0c0 41.67-33.9 92-76 92m52-100.66a4 4 0 0 1-3.29 4.61a5 5 0 0 1-.66 0a4 4 0 0 1-3.95-3.34A45.31 45.31 0 0 0 135.34 60a4 4 0 0 1 1.32-7.9A53.46 53.46 0 0 1 180 95.34"/></svg>
React
import type { SVGProps } from "react";
export function PhBalloonThin(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="M128 20a84.09 84.09 0 0 0-84 84c0 22.57 9.08 47.63 24.28 67c12.68 16.17 28 26.81 44.22 31l-12.18 28.4A4 4 0 0 0 104 236h48a4 4 0 0 0 3.68-5.58L143.5 202c16.23-4.17 31.54-14.81 44.22-31c15.2-19.41 24.28-44.47 24.28-67a84.09 84.09 0 0 0-84-84m17.93 208h-35.86l10.48-24.46a60.6 60.6 0 0 0 14.9 0ZM128 196c-42.1 0-76-50.33-76-92a76 76 0 0 1 152 0c0 41.67-33.9 92-76 92m52-100.66a4 4 0 0 1-3.29 4.61a5 5 0 0 1-.66 0a4 4 0 0 1-3.95-3.34A45.31 45.31 0 0 0 135.34 60a4 4 0 0 1 1.32-7.9A53.46 53.46 0 0 1 180 95.34"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 20a84.09 84.09 0 0 0-84 84c0 22.57 9.08 47.63 24.28 67c12.68 16.17 28 26.81 44.22 31l-12.18 28.4A4 4 0 0 0 104 236h48a4 4 0 0 0 3.68-5.58L143.5 202c16.23-4.17 31.54-14.81 44.22-31c15.2-19.41 24.28-44.47 24.28-67a84.09 84.09 0 0 0-84-84m17.93 208h-35.86l10.48-24.46a60.6 60.6 0 0 0 14.9 0ZM128 196c-42.1 0-76-50.33-76-92a76 76 0 0 1 152 0c0 41.67-33.9 92-76 92m52-100.66a4 4 0 0 1-3.29 4.61a5 5 0 0 1-.66 0a4 4 0 0 1-3.95-3.34A45.31 45.31 0 0 0 135.34 60a4 4 0 0 1 1.32-7.9A53.46 53.46 0 0 1 180 95.34"/></svg> </template>
CSS
.icon-balloon-thin {
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%22M128%2020a84.09%2084.09%200%200%200-84%2084c0%2022.57%209.08%2047.63%2024.28%2067c12.68%2016.17%2028%2026.81%2044.22%2031l-12.18%2028.4A4%204%200%200%200%20104%20236h48a4%204%200%200%200%203.68-5.58L143.5%20202c16.23-4.17%2031.54-14.81%2044.22-31c15.2-19.41%2024.28-44.47%2024.28-67a84.09%2084.09%200%200%200-84-84m17.93%20208h-35.86l10.48-24.46a60.6%2060.6%200%200%200%2014.9%200ZM128%20196c-42.1%200-76-50.33-76-92a76%2076%200%200%201%20152%200c0%2041.67-33.9%2092-76%2092m52-100.66a4%204%200%200%201-3.29%204.61a5%205%200%200%201-.66%200a4%204%200%200%201-3.95-3.34A45.31%2045.31%200%200%200%20135.34%2060a4%204%200%200%201%201.32-7.9A53.46%2053.46%200%200%201%20180%2095.34%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%22M128%2020a84.09%2084.09%200%200%200-84%2084c0%2022.57%209.08%2047.63%2024.28%2067c12.68%2016.17%2028%2026.81%2044.22%2031l-12.18%2028.4A4%204%200%200%200%20104%20236h48a4%204%200%200%200%203.68-5.58L143.5%20202c16.23-4.17%2031.54-14.81%2044.22-31c15.2-19.41%2024.28-44.47%2024.28-67a84.09%2084.09%200%200%200-84-84m17.93%20208h-35.86l10.48-24.46a60.6%2060.6%200%200%200%2014.9%200ZM128%20196c-42.1%200-76-50.33-76-92a76%2076%200%200%201%20152%200c0%2041.67-33.9%2092-76%2092m52-100.66a4%204%200%200%201-3.29%204.61a5%205%200%200%201-.66%200a4%204%200%200%201-3.95-3.34A45.31%2045.31%200%200%200%20135.34%2060a4%204%200%200%201%201.32-7.9A53.46%2053.46%200%200%201%20180%2095.34%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/balloon-thin.svg?color=%231a73e8&size=48
