briefcase icon
briefcase-28 from Fluent UI System Color Icons by Microsoft Corporation · 28 · MIT Free for personal and commercial use.
- Name
- briefcase-28
- Set
- Fluent UI System Color Icons
- Style
- 28
- Viewbox
- 28×28
- 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 28 28"><g fill="none"><path fill="url(#SVGsC0j6bXs)" fill-rule="evenodd" d="M16.746 2.5a2.25 2.25 0 0 1 2.25 2.25V7H19l-5 3l-5-3l-.004-.002V4.75a2.25 2.25 0 0 1 2.25-2.25zm-5.5 1.5a.75.75 0 0 0-.75.75V7h7V4.75a.75.75 0 0 0-.75-.75z" clip-rule="evenodd"/><path fill="url(#SVGnY2JSxfM)" d="M3 13h22v7.25A3.75 3.75 0 0 1 21.25 24H6.75A3.75 3.75 0 0 1 3 20.25z"/><path fill="url(#SVG4ZPEybJY)" d="M3 13h22v7.25A3.75 3.75 0 0 1 21.25 24H6.75A3.75 3.75 0 0 1 3 20.25z"/><path fill="url(#SVGltg5aePL)" d="M3 10.75A3.75 3.75 0 0 1 6.75 7h14.5A3.75 3.75 0 0 1 25 10.75v4A2.25 2.25 0 0 1 22.75 17H5.25A2.25 2.25 0 0 1 3 14.75z"/><path fill="url(#SVGkA50Ydmy)" d="M15.246 13.516h-2.508a1.25 1.25 0 0 0-1.254 1.246v2.492a1.25 1.25 0 0 0 1.254 1.246h2.508a1.25 1.25 0 0 0 1.254-1.246v-2.492a1.25 1.25 0 0 0-1.254-1.246"/><defs><linearGradient id="SVGsC0j6bXs" x1="8.542" x2="11.184" y1="3.25" y2="11.204" gradientUnits="userSpaceOnUse"><stop stop-color="#0094f0"/><stop offset="1" stop-color="#163697"/></linearGradient><linearGradient id="SVGnY2JSxfM" x1="3.786" x2="9.728" y1="15.063" y2="35.325" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#cc23d1"/></linearGradient><linearGradient id="SVGltg5aePL" x1="5.2" x2="16.258" y1="7.415" y2="19.722" gradientUnits="userSpaceOnUse"><stop stop-color="#80f1e6"/><stop offset=".552" stop-color="#40c4f5"/><stop offset="1" stop-color="#00a2fa"/></linearGradient><linearGradient id="SVGkA50Ydmy" x1="13.992" x2="13.992" y1="13.516" y2="18.5" gradientUnits="userSpaceOnUse"><stop stop-color="#b8f5ff"/><stop offset=".844" stop-color="#7cecff"/></linearGradient><radialGradient id="SVG4ZPEybJY" cx="0" cy="0" r="1" gradientTransform="matrix(0 11 -24.5223 0 14 13)" 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 FluentColorBriefcase28(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="url(#SVGsC0j6bXs)" fillRule="evenodd" d="M16.746 2.5a2.25 2.25 0 0 1 2.25 2.25V7H19l-5 3l-5-3l-.004-.002V4.75a2.25 2.25 0 0 1 2.25-2.25zm-5.5 1.5a.75.75 0 0 0-.75.75V7h7V4.75a.75.75 0 0 0-.75-.75z" clipRule="evenodd"/><path fill="url(#SVGnY2JSxfM)" d="M3 13h22v7.25A3.75 3.75 0 0 1 21.25 24H6.75A3.75 3.75 0 0 1 3 20.25z"/><path fill="url(#SVG4ZPEybJY)" d="M3 13h22v7.25A3.75 3.75 0 0 1 21.25 24H6.75A3.75 3.75 0 0 1 3 20.25z"/><path fill="url(#SVGltg5aePL)" d="M3 10.75A3.75 3.75 0 0 1 6.75 7h14.5A3.75 3.75 0 0 1 25 10.75v4A2.25 2.25 0 0 1 22.75 17H5.25A2.25 2.25 0 0 1 3 14.75z"/><path fill="url(#SVGkA50Ydmy)" d="M15.246 13.516h-2.508a1.25 1.25 0 0 0-1.254 1.246v2.492a1.25 1.25 0 0 0 1.254 1.246h2.508a1.25 1.25 0 0 0 1.254-1.246v-2.492a1.25 1.25 0 0 0-1.254-1.246"/><defs><linearGradient id="SVGsC0j6bXs" x1="8.542" x2="11.184" y1="3.25" y2="11.204" gradientUnits="userSpaceOnUse"><stop stopColor="#0094f0"/><stop offset="1" stopColor="#163697"/></linearGradient><linearGradient id="SVGnY2JSxfM" x1="3.786" x2="9.728" y1="15.063" y2="35.325" gradientUnits="userSpaceOnUse"><stop stopColor="#0fafff"/><stop offset="1" stopColor="#cc23d1"/></linearGradient><linearGradient id="SVGltg5aePL" x1="5.2" x2="16.258" y1="7.415" y2="19.722" gradientUnits="userSpaceOnUse"><stop stopColor="#80f1e6"/><stop offset=".552" stopColor="#40c4f5"/><stop offset="1" stopColor="#00a2fa"/></linearGradient><linearGradient id="SVGkA50Ydmy" x1="13.992" x2="13.992" y1="13.516" y2="18.5" gradientUnits="userSpaceOnUse"><stop stopColor="#b8f5ff"/><stop offset=".844" stopColor="#7cecff"/></linearGradient><radialGradient id="SVG4ZPEybJY" cx="0" cy="0" r="1" gradientTransform="matrix(0 11 -24.5223 0 14 13)" 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 28 28"><g fill="none"><path fill="url(#SVGsC0j6bXs)" fill-rule="evenodd" d="M16.746 2.5a2.25 2.25 0 0 1 2.25 2.25V7H19l-5 3l-5-3l-.004-.002V4.75a2.25 2.25 0 0 1 2.25-2.25zm-5.5 1.5a.75.75 0 0 0-.75.75V7h7V4.75a.75.75 0 0 0-.75-.75z" clip-rule="evenodd"/><path fill="url(#SVGnY2JSxfM)" d="M3 13h22v7.25A3.75 3.75 0 0 1 21.25 24H6.75A3.75 3.75 0 0 1 3 20.25z"/><path fill="url(#SVG4ZPEybJY)" d="M3 13h22v7.25A3.75 3.75 0 0 1 21.25 24H6.75A3.75 3.75 0 0 1 3 20.25z"/><path fill="url(#SVGltg5aePL)" d="M3 10.75A3.75 3.75 0 0 1 6.75 7h14.5A3.75 3.75 0 0 1 25 10.75v4A2.25 2.25 0 0 1 22.75 17H5.25A2.25 2.25 0 0 1 3 14.75z"/><path fill="url(#SVGkA50Ydmy)" d="M15.246 13.516h-2.508a1.25 1.25 0 0 0-1.254 1.246v2.492a1.25 1.25 0 0 0 1.254 1.246h2.508a1.25 1.25 0 0 0 1.254-1.246v-2.492a1.25 1.25 0 0 0-1.254-1.246"/><defs><linearGradient id="SVGsC0j6bXs" x1="8.542" x2="11.184" y1="3.25" y2="11.204" gradientUnits="userSpaceOnUse"><stop stop-color="#0094f0"/><stop offset="1" stop-color="#163697"/></linearGradient><linearGradient id="SVGnY2JSxfM" x1="3.786" x2="9.728" y1="15.063" y2="35.325" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#cc23d1"/></linearGradient><linearGradient id="SVGltg5aePL" x1="5.2" x2="16.258" y1="7.415" y2="19.722" gradientUnits="userSpaceOnUse"><stop stop-color="#80f1e6"/><stop offset=".552" stop-color="#40c4f5"/><stop offset="1" stop-color="#00a2fa"/></linearGradient><linearGradient id="SVGkA50Ydmy" x1="13.992" x2="13.992" y1="13.516" y2="18.5" gradientUnits="userSpaceOnUse"><stop stop-color="#b8f5ff"/><stop offset=".844" stop-color="#7cecff"/></linearGradient><radialGradient id="SVG4ZPEybJY" cx="0" cy="0" r="1" gradientTransform="matrix(0 11 -24.5223 0 14 13)" 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-28 {
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%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGsC0j6bXs)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M16.746%202.5a2.25%202.25%200%200%201%202.25%202.25V7H19l-5%203l-5-3l-.004-.002V4.75a2.25%202.25%200%200%201%202.25-2.25zm-5.5%201.5a.75.75%200%200%200-.75.75V7h7V4.75a.75.75%200%200%200-.75-.75z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGnY2JSxfM)%22%20d%3D%22M3%2013h22v7.25A3.75%203.75%200%200%201%2021.25%2024H6.75A3.75%203.75%200%200%201%203%2020.25z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG4ZPEybJY)%22%20d%3D%22M3%2013h22v7.25A3.75%203.75%200%200%201%2021.25%2024H6.75A3.75%203.75%200%200%201%203%2020.25z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGltg5aePL)%22%20d%3D%22M3%2010.75A3.75%203.75%200%200%201%206.75%207h14.5A3.75%203.75%200%200%201%2025%2010.75v4A2.25%202.25%200%200%201%2022.75%2017H5.25A2.25%202.25%200%200%201%203%2014.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGkA50Ydmy)%22%20d%3D%22M15.246%2013.516h-2.508a1.25%201.25%200%200%200-1.254%201.246v2.492a1.25%201.25%200%200%200%201.254%201.246h2.508a1.25%201.25%200%200%200%201.254-1.246v-2.492a1.25%201.25%200%200%200-1.254-1.246%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGsC0j6bXs%22%20x1%3D%228.542%22%20x2%3D%2211.184%22%20y1%3D%223.25%22%20y2%3D%2211.204%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%22SVGnY2JSxfM%22%20x1%3D%223.786%22%20x2%3D%229.728%22%20y1%3D%2215.063%22%20y2%3D%2235.325%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%22SVGltg5aePL%22%20x1%3D%225.2%22%20x2%3D%2216.258%22%20y1%3D%227.415%22%20y2%3D%2219.722%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%22SVGkA50Ydmy%22%20x1%3D%2213.992%22%20x2%3D%2213.992%22%20y1%3D%2213.516%22%20y2%3D%2218.5%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%22SVG4ZPEybJY%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%2011%20-24.5223%200%2014%2013)%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%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGsC0j6bXs)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M16.746%202.5a2.25%202.25%200%200%201%202.25%202.25V7H19l-5%203l-5-3l-.004-.002V4.75a2.25%202.25%200%200%201%202.25-2.25zm-5.5%201.5a.75.75%200%200%200-.75.75V7h7V4.75a.75.75%200%200%200-.75-.75z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGnY2JSxfM)%22%20d%3D%22M3%2013h22v7.25A3.75%203.75%200%200%201%2021.25%2024H6.75A3.75%203.75%200%200%201%203%2020.25z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG4ZPEybJY)%22%20d%3D%22M3%2013h22v7.25A3.75%203.75%200%200%201%2021.25%2024H6.75A3.75%203.75%200%200%201%203%2020.25z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGltg5aePL)%22%20d%3D%22M3%2010.75A3.75%203.75%200%200%201%206.75%207h14.5A3.75%203.75%200%200%201%2025%2010.75v4A2.25%202.25%200%200%201%2022.75%2017H5.25A2.25%202.25%200%200%201%203%2014.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGkA50Ydmy)%22%20d%3D%22M15.246%2013.516h-2.508a1.25%201.25%200%200%200-1.254%201.246v2.492a1.25%201.25%200%200%200%201.254%201.246h2.508a1.25%201.25%200%200%200%201.254-1.246v-2.492a1.25%201.25%200%200%200-1.254-1.246%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGsC0j6bXs%22%20x1%3D%228.542%22%20x2%3D%2211.184%22%20y1%3D%223.25%22%20y2%3D%2211.204%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%22SVGnY2JSxfM%22%20x1%3D%223.786%22%20x2%3D%229.728%22%20y1%3D%2215.063%22%20y2%3D%2235.325%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%22SVGltg5aePL%22%20x1%3D%225.2%22%20x2%3D%2216.258%22%20y1%3D%227.415%22%20y2%3D%2219.722%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%22SVGkA50Ydmy%22%20x1%3D%2213.992%22%20x2%3D%2213.992%22%20y1%3D%2213.516%22%20y2%3D%2218.5%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%22SVG4ZPEybJY%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%2011%20-24.5223%200%2014%2013)%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-28.svg?color=%231a73e8&size=48
