balloon icon
balloon-16-filled from Fluent UI System Icons by Microsoft Corporation · 16 Filled · MIT Free for personal and commercial use.
- Name
- balloon-16-filled
- Set
- Fluent UI System Icons
- Style
- 16 Filled
- Viewbox
- 16×16
- License
- MIT
7 other variants in Fluent UI System Icons
The same icon in other sets
balloonBootstrap IconsballoonBoxIcons v2 SolidballoonEmoji One (Colored)balloonFluent EmojiballoonFluent Emoji FlatballoonFluent Emoji High ContrastballoonFirefox OS EmojiballoonHuge IconsballoonIonIconsballoonLucideballoonMaterial Design IconsballoonNoto EmojiballoonOpenMojiballoonPhosphorballoonPixelarticonsballoon-boldSolarballoonStreamline EmojisballoonTabler IconsballoonTwitter Emoji
Use the balloon icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1C5.184 1 3.5 3.266 3.5 5.5c0 1.37.548 2.728 1.36 3.744c.691.867 1.624 1.542 2.64 1.714V11a2 2 0 0 0 2 2H11a1 1 0 0 1 1 1v.5a.5.5 0 0 0 1 0V14a2 2 0 0 0-2-2H9.5a1 1 0 0 1-1-1v-.042c1.016-.172 1.949-.847 2.64-1.714c.812-1.016 1.36-2.374 1.36-3.744C12.5 3.266 10.816 1 8 1m0 2c.663 0 1.283.326 1.729.771c.445.446.771 1.066.771 1.729a.5.5 0 0 1-1 0c0-.337-.174-.717-.479-1.021C8.717 4.174 8.337 4 8 4a.5.5 0 0 1 0-1"/></svg>
React
import type { SVGProps } from "react";
export function FluentBalloon16Filled(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1C5.184 1 3.5 3.266 3.5 5.5c0 1.37.548 2.728 1.36 3.744c.691.867 1.624 1.542 2.64 1.714V11a2 2 0 0 0 2 2H11a1 1 0 0 1 1 1v.5a.5.5 0 0 0 1 0V14a2 2 0 0 0-2-2H9.5a1 1 0 0 1-1-1v-.042c1.016-.172 1.949-.847 2.64-1.714c.812-1.016 1.36-2.374 1.36-3.744C12.5 3.266 10.816 1 8 1m0 2c.663 0 1.283.326 1.729.771c.445.446.771 1.066.771 1.729a.5.5 0 0 1-1 0c0-.337-.174-.717-.479-1.021C8.717 4.174 8.337 4 8 4a.5.5 0 0 1 0-1"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1C5.184 1 3.5 3.266 3.5 5.5c0 1.37.548 2.728 1.36 3.744c.691.867 1.624 1.542 2.64 1.714V11a2 2 0 0 0 2 2H11a1 1 0 0 1 1 1v.5a.5.5 0 0 0 1 0V14a2 2 0 0 0-2-2H9.5a1 1 0 0 1-1-1v-.042c1.016-.172 1.949-.847 2.64-1.714c.812-1.016 1.36-2.374 1.36-3.744C12.5 3.266 10.816 1 8 1m0 2c.663 0 1.283.326 1.729.771c.445.446.771 1.066.771 1.729a.5.5 0 0 1-1 0c0-.337-.174-.717-.479-1.021C8.717 4.174 8.337 4 8 4a.5.5 0 0 1 0-1"/></svg> </template>
CSS
.icon-balloon-16-filled {
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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8%201C5.184%201%203.5%203.266%203.5%205.5c0%201.37.548%202.728%201.36%203.744c.691.867%201.624%201.542%202.64%201.714V11a2%202%200%200%200%202%202H11a1%201%200%200%201%201%201v.5a.5.5%200%200%200%201%200V14a2%202%200%200%200-2-2H9.5a1%201%200%200%201-1-1v-.042c1.016-.172%201.949-.847%202.64-1.714c.812-1.016%201.36-2.374%201.36-3.744C12.5%203.266%2010.816%201%208%201m0%202c.663%200%201.283.326%201.729.771c.445.446.771%201.066.771%201.729a.5.5%200%200%201-1%200c0-.337-.174-.717-.479-1.021C8.717%204.174%208.337%204%208%204a.5.5%200%200%201%200-1%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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8%201C5.184%201%203.5%203.266%203.5%205.5c0%201.37.548%202.728%201.36%203.744c.691.867%201.624%201.542%202.64%201.714V11a2%202%200%200%200%202%202H11a1%201%200%200%201%201%201v.5a.5.5%200%200%200%201%200V14a2%202%200%200%200-2-2H9.5a1%201%200%200%201-1-1v-.042c1.016-.172%201.949-.847%202.64-1.714c.812-1.016%201.36-2.374%201.36-3.744C12.5%203.266%2010.816%201%208%201m0%202c.663%200%201.283.326%201.729.771c.445.446.771%201.066.771%201.729a.5.5%200%200%201-1%200c0-.337-.174-.717-.479-1.021C8.717%204.174%208.337%204%208%204a.5.5%200%200%201%200-1%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/balloon-16-filled.svg?color=%231a73e8&size=48
