slack icon logo

slack-icon from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.

Name
slack-icon
Set
SVG Logos
Style
Color
Viewbox
256×256
License
CC0

Use the slack icon logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#e01e5a" d="M53.841 161.32c0 14.832-11.987 26.82-26.819 26.82S.203 176.152.203 161.32c0-14.831 11.987-26.818 26.82-26.818H53.84zm13.41 0c0-14.831 11.987-26.818 26.819-26.818s26.819 11.987 26.819 26.819v67.047c0 14.832-11.987 26.82-26.82 26.82c-14.83 0-26.818-11.988-26.818-26.82z"/><path fill="#36c5f0" d="M94.07 53.638c-14.832 0-26.82-11.987-26.82-26.819S79.239 0 94.07 0s26.819 11.987 26.819 26.819v26.82zm0 13.613c14.832 0 26.819 11.987 26.819 26.819s-11.987 26.819-26.82 26.819H26.82C11.987 120.889 0 108.902 0 94.069c0-14.83 11.987-26.818 26.819-26.818z"/><path fill="#2eb67d" d="M201.55 94.07c0-14.832 11.987-26.82 26.818-26.82s26.82 11.988 26.82 26.82s-11.988 26.819-26.82 26.819H201.55zm-13.41 0c0 14.832-11.988 26.819-26.82 26.819c-14.831 0-26.818-11.987-26.818-26.82V26.82C134.502 11.987 146.489 0 161.32 0s26.819 11.987 26.819 26.819z"/><path fill="#ecb22e" d="M161.32 201.55c14.832 0 26.82 11.987 26.82 26.818s-11.988 26.82-26.82 26.82c-14.831 0-26.818-11.988-26.818-26.82V201.55zm0-13.41c-14.831 0-26.818-11.988-26.818-26.82c0-14.831 11.987-26.818 26.819-26.818h67.25c14.832 0 26.82 11.987 26.82 26.819s-11.988 26.819-26.82 26.819z"/></svg>

React

import type { SVGProps } from "react";

export function LogosSlackIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#e01e5a" d="M53.841 161.32c0 14.832-11.987 26.82-26.819 26.82S.203 176.152.203 161.32c0-14.831 11.987-26.818 26.82-26.818H53.84zm13.41 0c0-14.831 11.987-26.818 26.819-26.818s26.819 11.987 26.819 26.819v67.047c0 14.832-11.987 26.82-26.82 26.82c-14.83 0-26.818-11.988-26.818-26.82z"/><path fill="#36c5f0" d="M94.07 53.638c-14.832 0-26.82-11.987-26.82-26.819S79.239 0 94.07 0s26.819 11.987 26.819 26.819v26.82zm0 13.613c14.832 0 26.819 11.987 26.819 26.819s-11.987 26.819-26.82 26.819H26.82C11.987 120.889 0 108.902 0 94.069c0-14.83 11.987-26.818 26.819-26.818z"/><path fill="#2eb67d" d="M201.55 94.07c0-14.832 11.987-26.82 26.818-26.82s26.82 11.988 26.82 26.82s-11.988 26.819-26.82 26.819H201.55zm-13.41 0c0 14.832-11.988 26.819-26.82 26.819c-14.831 0-26.818-11.987-26.818-26.82V26.82C134.502 11.987 146.489 0 161.32 0s26.819 11.987 26.819 26.819z"/><path fill="#ecb22e" d="M161.32 201.55c14.832 0 26.82 11.987 26.82 26.818s-11.988 26.82-26.82 26.82c-14.831 0-26.818-11.988-26.818-26.82V201.55zm0-13.41c-14.831 0-26.818-11.988-26.818-26.82c0-14.831 11.987-26.818 26.819-26.818h67.25c14.832 0 26.82 11.987 26.82 26.819s-11.988 26.819-26.82 26.819z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#e01e5a" d="M53.841 161.32c0 14.832-11.987 26.82-26.819 26.82S.203 176.152.203 161.32c0-14.831 11.987-26.818 26.82-26.818H53.84zm13.41 0c0-14.831 11.987-26.818 26.819-26.818s26.819 11.987 26.819 26.819v67.047c0 14.832-11.987 26.82-26.82 26.82c-14.83 0-26.818-11.988-26.818-26.82z"/><path fill="#36c5f0" d="M94.07 53.638c-14.832 0-26.82-11.987-26.82-26.819S79.239 0 94.07 0s26.819 11.987 26.819 26.819v26.82zm0 13.613c14.832 0 26.819 11.987 26.819 26.819s-11.987 26.819-26.82 26.819H26.82C11.987 120.889 0 108.902 0 94.069c0-14.83 11.987-26.818 26.819-26.818z"/><path fill="#2eb67d" d="M201.55 94.07c0-14.832 11.987-26.82 26.818-26.82s26.82 11.988 26.82 26.82s-11.988 26.819-26.82 26.819H201.55zm-13.41 0c0 14.832-11.988 26.819-26.82 26.819c-14.831 0-26.818-11.987-26.818-26.82V26.82C134.502 11.987 146.489 0 161.32 0s26.819 11.987 26.819 26.819z"/><path fill="#ecb22e" d="M161.32 201.55c14.832 0 26.82 11.987 26.82 26.818s-11.988 26.82-26.82 26.82c-14.831 0-26.818-11.988-26.818-26.82V201.55zm0-13.41c-14.831 0-26.818-11.988-26.818-26.82c0-14.831 11.987-26.818 26.819-26.818h67.25c14.832 0 26.82 11.987 26.82 26.819s-11.988 26.819-26.82 26.819z"/></svg>
</template>

CSS

.icon-slack-icon {
  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%22%23e01e5a%22%20d%3D%22M53.841%20161.32c0%2014.832-11.987%2026.82-26.819%2026.82S.203%20176.152.203%20161.32c0-14.831%2011.987-26.818%2026.82-26.818H53.84zm13.41%200c0-14.831%2011.987-26.818%2026.819-26.818s26.819%2011.987%2026.819%2026.819v67.047c0%2014.832-11.987%2026.82-26.82%2026.82c-14.83%200-26.818-11.988-26.818-26.82z%22%2F%3E%3Cpath%20fill%3D%22%2336c5f0%22%20d%3D%22M94.07%2053.638c-14.832%200-26.82-11.987-26.82-26.819S79.239%200%2094.07%200s26.819%2011.987%2026.819%2026.819v26.82zm0%2013.613c14.832%200%2026.819%2011.987%2026.819%2026.819s-11.987%2026.819-26.82%2026.819H26.82C11.987%20120.889%200%20108.902%200%2094.069c0-14.83%2011.987-26.818%2026.819-26.818z%22%2F%3E%3Cpath%20fill%3D%22%232eb67d%22%20d%3D%22M201.55%2094.07c0-14.832%2011.987-26.82%2026.818-26.82s26.82%2011.988%2026.82%2026.82s-11.988%2026.819-26.82%2026.819H201.55zm-13.41%200c0%2014.832-11.988%2026.819-26.82%2026.819c-14.831%200-26.818-11.987-26.818-26.82V26.82C134.502%2011.987%20146.489%200%20161.32%200s26.819%2011.987%2026.819%2026.819z%22%2F%3E%3Cpath%20fill%3D%22%23ecb22e%22%20d%3D%22M161.32%20201.55c14.832%200%2026.82%2011.987%2026.82%2026.818s-11.988%2026.82-26.82%2026.82c-14.831%200-26.818-11.988-26.818-26.82V201.55zm0-13.41c-14.831%200-26.818-11.988-26.818-26.82c0-14.831%2011.987-26.818%2026.819-26.818h67.25c14.832%200%2026.82%2011.987%2026.82%2026.819s-11.988%2026.819-26.82%2026.819z%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%22%23e01e5a%22%20d%3D%22M53.841%20161.32c0%2014.832-11.987%2026.82-26.819%2026.82S.203%20176.152.203%20161.32c0-14.831%2011.987-26.818%2026.82-26.818H53.84zm13.41%200c0-14.831%2011.987-26.818%2026.819-26.818s26.819%2011.987%2026.819%2026.819v67.047c0%2014.832-11.987%2026.82-26.82%2026.82c-14.83%200-26.818-11.988-26.818-26.82z%22%2F%3E%3Cpath%20fill%3D%22%2336c5f0%22%20d%3D%22M94.07%2053.638c-14.832%200-26.82-11.987-26.82-26.819S79.239%200%2094.07%200s26.819%2011.987%2026.819%2026.819v26.82zm0%2013.613c14.832%200%2026.819%2011.987%2026.819%2026.819s-11.987%2026.819-26.82%2026.819H26.82C11.987%20120.889%200%20108.902%200%2094.069c0-14.83%2011.987-26.818%2026.819-26.818z%22%2F%3E%3Cpath%20fill%3D%22%232eb67d%22%20d%3D%22M201.55%2094.07c0-14.832%2011.987-26.82%2026.818-26.82s26.82%2011.988%2026.82%2026.82s-11.988%2026.819-26.82%2026.819H201.55zm-13.41%200c0%2014.832-11.988%2026.819-26.82%2026.819c-14.831%200-26.818-11.987-26.818-26.82V26.82C134.502%2011.987%20146.489%200%20161.32%200s26.819%2011.987%2026.819%2026.819z%22%2F%3E%3Cpath%20fill%3D%22%23ecb22e%22%20d%3D%22M161.32%20201.55c14.832%200%2026.82%2011.987%2026.82%2026.818s-11.988%2026.82-26.82%2026.82c-14.831%200-26.818-11.988-26.818-26.82V201.55zm0-13.41c-14.831%200-26.818-11.988-26.818-26.82c0-14.831%2011.987-26.818%2026.819-26.818h67.25c14.832%200%2026.82%2011.987%2026.82%2026.819s-11.988%2026.819-26.82%2026.819z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/logos/slack-icon.svg?color=%231a73e8&size=48