slack logo icon
slack-logo-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.
- Name
- slack-logo-light
- Set
- Phosphor
- Style
- Light
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
Use the slack logo icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M218 128a30 30 0 1 0-36-48V56a30 30 0 0 0-54-18a30 30 0 1 0-48 36H56a30 30 0 0 0-18 54a30 30 0 1 0 36 48v24a30 30 0 0 0 54 18a30 30 0 1 0 48-36h24a30 30 0 0 0 18-54m-18-42a18 18 0 0 1 0 36h-18v-18a18 18 0 0 1 18-18m-48-48a18 18 0 0 1 18 18v48a18 18 0 0 1-18 18h-18V56a18 18 0 0 1 18-18M86 56a18 18 0 0 1 36 0v18h-18a18 18 0 0 1-18-18m-48 48a18 18 0 0 1 18-18h48a18 18 0 0 1 18 18v18H56a18 18 0 0 1-18-18m18 66a18 18 0 0 1 0-36h18v18a18 18 0 0 1-18 18m48 48a18 18 0 0 1-18-18v-48a18 18 0 0 1 18-18h18v66a18 18 0 0 1-18 18m66-18a18 18 0 0 1-36 0v-18h18a18 18 0 0 1 18 18m30-30h-48a18 18 0 0 1-18-18v-18h66a18 18 0 0 1 0 36"/></svg>
React
import type { SVGProps } from "react";
export function PhSlackLogoLight(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="M218 128a30 30 0 1 0-36-48V56a30 30 0 0 0-54-18a30 30 0 1 0-48 36H56a30 30 0 0 0-18 54a30 30 0 1 0 36 48v24a30 30 0 0 0 54 18a30 30 0 1 0 48-36h24a30 30 0 0 0 18-54m-18-42a18 18 0 0 1 0 36h-18v-18a18 18 0 0 1 18-18m-48-48a18 18 0 0 1 18 18v48a18 18 0 0 1-18 18h-18V56a18 18 0 0 1 18-18M86 56a18 18 0 0 1 36 0v18h-18a18 18 0 0 1-18-18m-48 48a18 18 0 0 1 18-18h48a18 18 0 0 1 18 18v18H56a18 18 0 0 1-18-18m18 66a18 18 0 0 1 0-36h18v18a18 18 0 0 1-18 18m48 48a18 18 0 0 1-18-18v-48a18 18 0 0 1 18-18h18v66a18 18 0 0 1-18 18m66-18a18 18 0 0 1-36 0v-18h18a18 18 0 0 1 18 18m30-30h-48a18 18 0 0 1-18-18v-18h66a18 18 0 0 1 0 36"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M218 128a30 30 0 1 0-36-48V56a30 30 0 0 0-54-18a30 30 0 1 0-48 36H56a30 30 0 0 0-18 54a30 30 0 1 0 36 48v24a30 30 0 0 0 54 18a30 30 0 1 0 48-36h24a30 30 0 0 0 18-54m-18-42a18 18 0 0 1 0 36h-18v-18a18 18 0 0 1 18-18m-48-48a18 18 0 0 1 18 18v48a18 18 0 0 1-18 18h-18V56a18 18 0 0 1 18-18M86 56a18 18 0 0 1 36 0v18h-18a18 18 0 0 1-18-18m-48 48a18 18 0 0 1 18-18h48a18 18 0 0 1 18 18v18H56a18 18 0 0 1-18-18m18 66a18 18 0 0 1 0-36h18v18a18 18 0 0 1-18 18m48 48a18 18 0 0 1-18-18v-48a18 18 0 0 1 18-18h18v66a18 18 0 0 1-18 18m66-18a18 18 0 0 1-36 0v-18h18a18 18 0 0 1 18 18m30-30h-48a18 18 0 0 1-18-18v-18h66a18 18 0 0 1 0 36"/></svg> </template>
CSS
.icon-slack-logo-light {
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%22M218%20128a30%2030%200%201%200-36-48V56a30%2030%200%200%200-54-18a30%2030%200%201%200-48%2036H56a30%2030%200%200%200-18%2054a30%2030%200%201%200%2036%2048v24a30%2030%200%200%200%2054%2018a30%2030%200%201%200%2048-36h24a30%2030%200%200%200%2018-54m-18-42a18%2018%200%200%201%200%2036h-18v-18a18%2018%200%200%201%2018-18m-48-48a18%2018%200%200%201%2018%2018v48a18%2018%200%200%201-18%2018h-18V56a18%2018%200%200%201%2018-18M86%2056a18%2018%200%200%201%2036%200v18h-18a18%2018%200%200%201-18-18m-48%2048a18%2018%200%200%201%2018-18h48a18%2018%200%200%201%2018%2018v18H56a18%2018%200%200%201-18-18m18%2066a18%2018%200%200%201%200-36h18v18a18%2018%200%200%201-18%2018m48%2048a18%2018%200%200%201-18-18v-48a18%2018%200%200%201%2018-18h18v66a18%2018%200%200%201-18%2018m66-18a18%2018%200%200%201-36%200v-18h18a18%2018%200%200%201%2018%2018m30-30h-48a18%2018%200%200%201-18-18v-18h66a18%2018%200%200%201%200%2036%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%22M218%20128a30%2030%200%201%200-36-48V56a30%2030%200%200%200-54-18a30%2030%200%201%200-48%2036H56a30%2030%200%200%200-18%2054a30%2030%200%201%200%2036%2048v24a30%2030%200%200%200%2054%2018a30%2030%200%201%200%2048-36h24a30%2030%200%200%200%2018-54m-18-42a18%2018%200%200%201%200%2036h-18v-18a18%2018%200%200%201%2018-18m-48-48a18%2018%200%200%201%2018%2018v48a18%2018%200%200%201-18%2018h-18V56a18%2018%200%200%201%2018-18M86%2056a18%2018%200%200%201%2036%200v18h-18a18%2018%200%200%201-18-18m-48%2048a18%2018%200%200%201%2018-18h48a18%2018%200%200%201%2018%2018v18H56a18%2018%200%200%201-18-18m18%2066a18%2018%200%200%201%200-36h18v18a18%2018%200%200%201-18%2018m48%2048a18%2018%200%200%201-18-18v-48a18%2018%200%200%201%2018-18h18v66a18%2018%200%200%201-18%2018m66-18a18%2018%200%200%201-36%200v-18h18a18%2018%200%200%201%2018%2018m30-30h-48a18%2018%200%200%201-18-18v-18h66a18%2018%200%200%201%200%2036%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/slack-logo-light.svg?color=%231a73e8&size=48
