briefcase icon
briefcase-24 from Fluent UI System Color Icons by Microsoft Corporation · 24 · MIT Free for personal and commercial use.
- Name
- briefcase-24
- Set
- Fluent UI System Color Icons
- Style
- 24
- Viewbox
- 24×24
- License
- MIT
5 other variants in Fluent UI System Color Icons
The same icon in other sets
briefcaseAkar IconsbriefcaseBootstrap IconsbriefcaseBoxIcons v2briefcaseBoxIcons v2 SolidbriefcaseCodiconsbriefcaseEmoji One (Colored)briefcaseElement Plusbriefcase-fillEva IconsbriefcaseFramework7 IconsbriefcaseFont Awesome 6 SolidbriefcaseFont Awesome SolidbriefcaseFeather Iconsbriefcase-outlineFlowbite Iconsbriefcase-12-filledFluent UI System IconsbriefcaseFluent EmojibriefcaseFluent Emoji FlatbriefcaseFluent Emoji High ContrastbriefcaseFirefox OS Emojibriefcasecss.ggbriefcaseHeroIconsbriefcaseHumbleiconsbriefcaseIconParkbriefcaseIconPark OutlinebriefcaseIconPark Solid
Use the briefcase icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGzrGP1bSw)" fill-rule="evenodd" d="M13.75 2A2.25 2.25 0 0 1 16 4.25V6l-4 2.31L8 6V4.25A2.25 2.25 0 0 1 10.25 2zm-3.5 1.5a.75.75 0 0 0-.75.75V6h5V4.25a.75.75 0 0 0-.75-.75z" clip-rule="evenodd"/><path fill="url(#SVG40XRKePu)" d="M3 11h18v5.75A3.25 3.25 0 0 1 17.75 20H6.25A3.25 3.25 0 0 1 3 16.75z"/><path fill="url(#SVGiHPn8bin)" d="M3 11h18v5.75A3.25 3.25 0 0 1 17.75 20H6.25A3.25 3.25 0 0 1 3 16.75z"/><path fill="url(#SVGnlbMbwZH)" d="M3 9.25A3.25 3.25 0 0 1 6.25 6h11.5A3.25 3.25 0 0 1 21 9.25v3A1.75 1.75 0 0 1 19.25 14H4.75A1.75 1.75 0 0 1 3 12.25z"/><path fill="url(#SVGX7Xlhe2t)" d="M13 11h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/><defs><linearGradient id="SVGzrGP1bSw" x1="7.637" x2="9.95" y1="2.631" y2="9.253" gradientUnits="userSpaceOnUse"><stop stop-color="#0094f0"/><stop offset="1" stop-color="#163697"/></linearGradient><linearGradient id="SVG40XRKePu" x1="3.643" x2="8.505" y1="12.688" y2="29.266" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#cc23d1"/></linearGradient><linearGradient id="SVGnlbMbwZH" x1="4.8" x2="13.623" y1="6.332" y2="16.375" gradientUnits="userSpaceOnUse"><stop stop-color="#80f1e6"/><stop offset=".552" stop-color="#40c4f5"/><stop offset="1" stop-color="#00a2fa"/></linearGradient><linearGradient id="SVGX7Xlhe2t" x1="12" x2="12" y1="11" y2="15" gradientUnits="userSpaceOnUse"><stop stop-color="#b8f5ff"/><stop offset=".844" stop-color="#7cecff"/></linearGradient><radialGradient id="SVGiHPn8bin" cx="0" cy="0" r="1" gradientTransform="matrix(0 9 -20.0637 0 12 11)" gradientUnits="userSpaceOnUse"><stop offset=".337" stop-color="#194694"/><stop offset=".747" stop-color="#367af2" stop-opacity="0"/></radialGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorBriefcase24(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGzrGP1bSw)" fillRule="evenodd" d="M13.75 2A2.25 2.25 0 0 1 16 4.25V6l-4 2.31L8 6V4.25A2.25 2.25 0 0 1 10.25 2zm-3.5 1.5a.75.75 0 0 0-.75.75V6h5V4.25a.75.75 0 0 0-.75-.75z" clipRule="evenodd"/><path fill="url(#SVG40XRKePu)" d="M3 11h18v5.75A3.25 3.25 0 0 1 17.75 20H6.25A3.25 3.25 0 0 1 3 16.75z"/><path fill="url(#SVGiHPn8bin)" d="M3 11h18v5.75A3.25 3.25 0 0 1 17.75 20H6.25A3.25 3.25 0 0 1 3 16.75z"/><path fill="url(#SVGnlbMbwZH)" d="M3 9.25A3.25 3.25 0 0 1 6.25 6h11.5A3.25 3.25 0 0 1 21 9.25v3A1.75 1.75 0 0 1 19.25 14H4.75A1.75 1.75 0 0 1 3 12.25z"/><path fill="url(#SVGX7Xlhe2t)" d="M13 11h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/><defs><linearGradient id="SVGzrGP1bSw" x1="7.637" x2="9.95" y1="2.631" y2="9.253" gradientUnits="userSpaceOnUse"><stop stopColor="#0094f0"/><stop offset="1" stopColor="#163697"/></linearGradient><linearGradient id="SVG40XRKePu" x1="3.643" x2="8.505" y1="12.688" y2="29.266" gradientUnits="userSpaceOnUse"><stop stopColor="#0fafff"/><stop offset="1" stopColor="#cc23d1"/></linearGradient><linearGradient id="SVGnlbMbwZH" x1="4.8" x2="13.623" y1="6.332" y2="16.375" gradientUnits="userSpaceOnUse"><stop stopColor="#80f1e6"/><stop offset=".552" stopColor="#40c4f5"/><stop offset="1" stopColor="#00a2fa"/></linearGradient><linearGradient id="SVGX7Xlhe2t" x1="12" x2="12" y1="11" y2="15" gradientUnits="userSpaceOnUse"><stop stopColor="#b8f5ff"/><stop offset=".844" stopColor="#7cecff"/></linearGradient><radialGradient id="SVGiHPn8bin" cx="0" cy="0" r="1" gradientTransform="matrix(0 9 -20.0637 0 12 11)" gradientUnits="userSpaceOnUse"><stop offset=".337" stopColor="#194694"/><stop offset=".747" stopColor="#367af2" stopOpacity="0"/></radialGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGzrGP1bSw)" fill-rule="evenodd" d="M13.75 2A2.25 2.25 0 0 1 16 4.25V6l-4 2.31L8 6V4.25A2.25 2.25 0 0 1 10.25 2zm-3.5 1.5a.75.75 0 0 0-.75.75V6h5V4.25a.75.75 0 0 0-.75-.75z" clip-rule="evenodd"/><path fill="url(#SVG40XRKePu)" d="M3 11h18v5.75A3.25 3.25 0 0 1 17.75 20H6.25A3.25 3.25 0 0 1 3 16.75z"/><path fill="url(#SVGiHPn8bin)" d="M3 11h18v5.75A3.25 3.25 0 0 1 17.75 20H6.25A3.25 3.25 0 0 1 3 16.75z"/><path fill="url(#SVGnlbMbwZH)" d="M3 9.25A3.25 3.25 0 0 1 6.25 6h11.5A3.25 3.25 0 0 1 21 9.25v3A1.75 1.75 0 0 1 19.25 14H4.75A1.75 1.75 0 0 1 3 12.25z"/><path fill="url(#SVGX7Xlhe2t)" d="M13 11h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/><defs><linearGradient id="SVGzrGP1bSw" x1="7.637" x2="9.95" y1="2.631" y2="9.253" gradientUnits="userSpaceOnUse"><stop stop-color="#0094f0"/><stop offset="1" stop-color="#163697"/></linearGradient><linearGradient id="SVG40XRKePu" x1="3.643" x2="8.505" y1="12.688" y2="29.266" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#cc23d1"/></linearGradient><linearGradient id="SVGnlbMbwZH" x1="4.8" x2="13.623" y1="6.332" y2="16.375" gradientUnits="userSpaceOnUse"><stop stop-color="#80f1e6"/><stop offset=".552" stop-color="#40c4f5"/><stop offset="1" stop-color="#00a2fa"/></linearGradient><linearGradient id="SVGX7Xlhe2t" x1="12" x2="12" y1="11" y2="15" gradientUnits="userSpaceOnUse"><stop stop-color="#b8f5ff"/><stop offset=".844" stop-color="#7cecff"/></linearGradient><radialGradient id="SVGiHPn8bin" cx="0" cy="0" r="1" gradientTransform="matrix(0 9 -20.0637 0 12 11)" gradientUnits="userSpaceOnUse"><stop offset=".337" stop-color="#194694"/><stop offset=".747" stop-color="#367af2" stop-opacity="0"/></radialGradient></defs></g></svg> </template>
CSS
.icon-briefcase-24 {
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%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGzrGP1bSw)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M13.75%202A2.25%202.25%200%200%201%2016%204.25V6l-4%202.31L8%206V4.25A2.25%202.25%200%200%201%2010.25%202zm-3.5%201.5a.75.75%200%200%200-.75.75V6h5V4.25a.75.75%200%200%200-.75-.75z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG40XRKePu)%22%20d%3D%22M3%2011h18v5.75A3.25%203.25%200%200%201%2017.75%2020H6.25A3.25%203.25%200%200%201%203%2016.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGiHPn8bin)%22%20d%3D%22M3%2011h18v5.75A3.25%203.25%200%200%201%2017.75%2020H6.25A3.25%203.25%200%200%201%203%2016.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGnlbMbwZH)%22%20d%3D%22M3%209.25A3.25%203.25%200%200%201%206.25%206h11.5A3.25%203.25%200%200%201%2021%209.25v3A1.75%201.75%200%200%201%2019.25%2014H4.75A1.75%201.75%200%200%201%203%2012.25z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGX7Xlhe2t)%22%20d%3D%22M13%2011h-2a1%201%200%200%200-1%201v2a1%201%200%200%200%201%201h2a1%201%200%200%200%201-1v-2a1%201%200%200%200-1-1%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGzrGP1bSw%22%20x1%3D%227.637%22%20x2%3D%229.95%22%20y1%3D%222.631%22%20y2%3D%229.253%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230094f0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23163697%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG40XRKePu%22%20x1%3D%223.643%22%20x2%3D%228.505%22%20y1%3D%2212.688%22%20y2%3D%2229.266%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230fafff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cc23d1%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGnlbMbwZH%22%20x1%3D%224.8%22%20x2%3D%2213.623%22%20y1%3D%226.332%22%20y2%3D%2216.375%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2380f1e6%22%2F%3E%3Cstop%20offset%3D%22.552%22%20stop-color%3D%22%2340c4f5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300a2fa%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGX7Xlhe2t%22%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2211%22%20y2%3D%2215%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23b8f5ff%22%2F%3E%3Cstop%20offset%3D%22.844%22%20stop-color%3D%22%237cecff%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGiHPn8bin%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%209%20-20.0637%200%2012%2011)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.337%22%20stop-color%3D%22%23194694%22%2F%3E%3Cstop%20offset%3D%22.747%22%20stop-color%3D%22%23367af2%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%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%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGzrGP1bSw)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M13.75%202A2.25%202.25%200%200%201%2016%204.25V6l-4%202.31L8%206V4.25A2.25%202.25%200%200%201%2010.25%202zm-3.5%201.5a.75.75%200%200%200-.75.75V6h5V4.25a.75.75%200%200%200-.75-.75z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG40XRKePu)%22%20d%3D%22M3%2011h18v5.75A3.25%203.25%200%200%201%2017.75%2020H6.25A3.25%203.25%200%200%201%203%2016.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGiHPn8bin)%22%20d%3D%22M3%2011h18v5.75A3.25%203.25%200%200%201%2017.75%2020H6.25A3.25%203.25%200%200%201%203%2016.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGnlbMbwZH)%22%20d%3D%22M3%209.25A3.25%203.25%200%200%201%206.25%206h11.5A3.25%203.25%200%200%201%2021%209.25v3A1.75%201.75%200%200%201%2019.25%2014H4.75A1.75%201.75%200%200%201%203%2012.25z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGX7Xlhe2t)%22%20d%3D%22M13%2011h-2a1%201%200%200%200-1%201v2a1%201%200%200%200%201%201h2a1%201%200%200%200%201-1v-2a1%201%200%200%200-1-1%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGzrGP1bSw%22%20x1%3D%227.637%22%20x2%3D%229.95%22%20y1%3D%222.631%22%20y2%3D%229.253%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230094f0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23163697%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG40XRKePu%22%20x1%3D%223.643%22%20x2%3D%228.505%22%20y1%3D%2212.688%22%20y2%3D%2229.266%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230fafff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cc23d1%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGnlbMbwZH%22%20x1%3D%224.8%22%20x2%3D%2213.623%22%20y1%3D%226.332%22%20y2%3D%2216.375%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2380f1e6%22%2F%3E%3Cstop%20offset%3D%22.552%22%20stop-color%3D%22%2340c4f5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300a2fa%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGX7Xlhe2t%22%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2211%22%20y2%3D%2215%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23b8f5ff%22%2F%3E%3Cstop%20offset%3D%22.844%22%20stop-color%3D%22%237cecff%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGiHPn8bin%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%209%20-20.0637%200%2012%2011)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.337%22%20stop-color%3D%22%23194694%22%2F%3E%3Cstop%20offset%3D%22.747%22%20stop-color%3D%22%23367af2%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/briefcase-24.svg?color=%231a73e8&size=48
