share icon
share-32-filled from Fluent UI System Icons by Microsoft Corporation · 32 Filled · MIT Free for personal and commercial use.
- Name
- share-32-filled
- Set
- Fluent UI System Icons
- Style
- 32 Filled
- Viewbox
- 32×32
- License
- MIT
12 other variants in Fluent UI System Icons
The same icon in other sets
shareBootstrap IconsshareBoxIcons v2shareBoxIcons v2 SolidshareCarbonshareCodiconsshareElement Plusshare-fillEva IconsshareFont Awesome 6 SolidshareFont Awesome SolidshareFeather Iconssharecss.ggshareHeroIconsshareHumbleiconsshareIconParkshareIconPark OutlineshareIonIconsshareJam IconsshareLine AwesomeshareLucideshareMage IconsshareMajesticonsshareMaterial SymbolsshareMaterial Symbols LightshareMaterial Design Icons
Related icons in Fluent UI System Icons
share-android-16-filledshare-close-tray-20-filledshare-ios-20-filledshare-multiple-16-filledshare-screen-24-filledshare-screen-person-16-filledshare-screen-person-overlay-16-filledshare-screen-person-overlay-inside-16-filledshare-screen-person-p-16-filledshare-screen-start-16-filledshare-screen-stop-16-filledshare-stop-24-filled
Use the share icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M14 3a1 1 0 1 1 0 2H7.5A2.5 2.5 0 0 0 5 7.5v17A2.5 2.5 0 0 0 7.5 27h17a2.5 2.5 0 0 0 2.5-2.5V19a1 1 0 1 1 2 0v5.5a4.5 4.5 0 0 1-4.5 4.5h-17A4.5 4.5 0 0 1 3 24.5v-17A4.5 4.5 0 0 1 7.5 3zm5.58-.907a1 1 0 0 1 1.067.146l10 8.5a1 1 0 0 1 0 1.523l-10 8.5A1 1 0 0 1 18.999 20v-3.96c-3.193.258-5.636 1.722-7.34 3.213a15.6 15.6 0 0 0-2.115 2.26a13 13 0 0 0-.645.93l-.027.046l-.006.006l.001.001A1 1 0 0 1 7 22.036c0-.222-.003-.444.003-.666c.011-.406.042-.982.12-1.67c.155-1.37.5-3.218 1.265-5.08s1.967-3.776 3.855-5.225C13.948 8.086 16.161 7.2 19 7.032V3a1 1 0 0 1 .58-.907"/></svg>
React
import type { SVGProps } from "react";
export function FluentShare32Filled(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M14 3a1 1 0 1 1 0 2H7.5A2.5 2.5 0 0 0 5 7.5v17A2.5 2.5 0 0 0 7.5 27h17a2.5 2.5 0 0 0 2.5-2.5V19a1 1 0 1 1 2 0v5.5a4.5 4.5 0 0 1-4.5 4.5h-17A4.5 4.5 0 0 1 3 24.5v-17A4.5 4.5 0 0 1 7.5 3zm5.58-.907a1 1 0 0 1 1.067.146l10 8.5a1 1 0 0 1 0 1.523l-10 8.5A1 1 0 0 1 18.999 20v-3.96c-3.193.258-5.636 1.722-7.34 3.213a15.6 15.6 0 0 0-2.115 2.26a13 13 0 0 0-.645.93l-.027.046l-.006.006l.001.001A1 1 0 0 1 7 22.036c0-.222-.003-.444.003-.666c.011-.406.042-.982.12-1.67c.155-1.37.5-3.218 1.265-5.08s1.967-3.776 3.855-5.225C13.948 8.086 16.161 7.2 19 7.032V3a1 1 0 0 1 .58-.907"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M14 3a1 1 0 1 1 0 2H7.5A2.5 2.5 0 0 0 5 7.5v17A2.5 2.5 0 0 0 7.5 27h17a2.5 2.5 0 0 0 2.5-2.5V19a1 1 0 1 1 2 0v5.5a4.5 4.5 0 0 1-4.5 4.5h-17A4.5 4.5 0 0 1 3 24.5v-17A4.5 4.5 0 0 1 7.5 3zm5.58-.907a1 1 0 0 1 1.067.146l10 8.5a1 1 0 0 1 0 1.523l-10 8.5A1 1 0 0 1 18.999 20v-3.96c-3.193.258-5.636 1.722-7.34 3.213a15.6 15.6 0 0 0-2.115 2.26a13 13 0 0 0-.645.93l-.027.046l-.006.006l.001.001A1 1 0 0 1 7 22.036c0-.222-.003-.444.003-.666c.011-.406.042-.982.12-1.67c.155-1.37.5-3.218 1.265-5.08s1.967-3.776 3.855-5.225C13.948 8.086 16.161 7.2 19 7.032V3a1 1 0 0 1 .58-.907"/></svg> </template>
CSS
.icon-share-32-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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M14%203a1%201%200%201%201%200%202H7.5A2.5%202.5%200%200%200%205%207.5v17A2.5%202.5%200%200%200%207.5%2027h17a2.5%202.5%200%200%200%202.5-2.5V19a1%201%200%201%201%202%200v5.5a4.5%204.5%200%200%201-4.5%204.5h-17A4.5%204.5%200%200%201%203%2024.5v-17A4.5%204.5%200%200%201%207.5%203zm5.58-.907a1%201%200%200%201%201.067.146l10%208.5a1%201%200%200%201%200%201.523l-10%208.5A1%201%200%200%201%2018.999%2020v-3.96c-3.193.258-5.636%201.722-7.34%203.213a15.6%2015.6%200%200%200-2.115%202.26a13%2013%200%200%200-.645.93l-.027.046l-.006.006l.001.001A1%201%200%200%201%207%2022.036c0-.222-.003-.444.003-.666c.011-.406.042-.982.12-1.67c.155-1.37.5-3.218%201.265-5.08s1.967-3.776%203.855-5.225C13.948%208.086%2016.161%207.2%2019%207.032V3a1%201%200%200%201%20.58-.907%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M14%203a1%201%200%201%201%200%202H7.5A2.5%202.5%200%200%200%205%207.5v17A2.5%202.5%200%200%200%207.5%2027h17a2.5%202.5%200%200%200%202.5-2.5V19a1%201%200%201%201%202%200v5.5a4.5%204.5%200%200%201-4.5%204.5h-17A4.5%204.5%200%200%201%203%2024.5v-17A4.5%204.5%200%200%201%207.5%203zm5.58-.907a1%201%200%200%201%201.067.146l10%208.5a1%201%200%200%201%200%201.523l-10%208.5A1%201%200%200%201%2018.999%2020v-3.96c-3.193.258-5.636%201.722-7.34%203.213a15.6%2015.6%200%200%200-2.115%202.26a13%2013%200%200%200-.645.93l-.027.046l-.006.006l.001.001A1%201%200%200%201%207%2022.036c0-.222-.003-.444.003-.666c.011-.406.042-.982.12-1.67c.155-1.37.5-3.218%201.265-5.08s1.967-3.776%203.855-5.225C13.948%208.086%2016.161%207.2%2019%207.032V3a1%201%200%200%201%20.58-.907%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/share-32-filled.svg?color=%231a73e8&size=48
