discord icon logo

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

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

Use the discord icon logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 199"><path fill="#5865f2" d="M216.856 16.597A208.5 208.5 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046q-29.538-4.442-58.533 0c-1.832-4.4-4.55-9.933-6.846-14.046a207.8 207.8 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161 161 0 0 0 79.735 175.3a136.4 136.4 0 0 1-21.846-10.632a109 109 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a132 132 0 0 0 5.355 4.237a136 136 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848c21.142-6.58 42.646-16.637 64.815-33.213c5.316-56.288-9.08-105.09-38.056-148.36M85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2s23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18m85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2c0 14.375-10.148 26.18-23.015 26.18"/></svg>

React

import type { SVGProps } from "react";

export function LogosDiscordIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 199"><path fill="#5865f2" d="M216.856 16.597A208.5 208.5 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046q-29.538-4.442-58.533 0c-1.832-4.4-4.55-9.933-6.846-14.046a207.8 207.8 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161 161 0 0 0 79.735 175.3a136.4 136.4 0 0 1-21.846-10.632a109 109 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a132 132 0 0 0 5.355 4.237a136 136 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848c21.142-6.58 42.646-16.637 64.815-33.213c5.316-56.288-9.08-105.09-38.056-148.36M85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2s23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18m85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2c0 14.375-10.148 26.18-23.015 26.18"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 199"><path fill="#5865f2" d="M216.856 16.597A208.5 208.5 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046q-29.538-4.442-58.533 0c-1.832-4.4-4.55-9.933-6.846-14.046a207.8 207.8 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161 161 0 0 0 79.735 175.3a136.4 136.4 0 0 1-21.846-10.632a109 109 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a132 132 0 0 0 5.355 4.237a136 136 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848c21.142-6.58 42.646-16.637 64.815-33.213c5.316-56.288-9.08-105.09-38.056-148.36M85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2s23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18m85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2c0 14.375-10.148 26.18-23.015 26.18"/></svg>
</template>

CSS

.icon-discord-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%20199%22%3E%3Cpath%20fill%3D%22%235865f2%22%20d%3D%22M216.856%2016.597A208.5%20208.5%200%200%200%20164.042%200c-2.275%204.113-4.933%209.645-6.766%2014.046q-29.538-4.442-58.533%200c-1.832-4.4-4.55-9.933-6.846-14.046a207.8%20207.8%200%200%200-52.855%2016.638C5.618%2067.147-3.443%20116.4%201.087%20164.956c22.169%2016.555%2043.653%2026.612%2064.775%2033.193A161%20161%200%200%200%2079.735%20175.3a136.4%20136.4%200%200%201-21.846-10.632a109%20109%200%200%200%205.356-4.237c42.122%2019.702%2087.89%2019.702%20129.51%200a132%20132%200%200%200%205.355%204.237a136%20136%200%200%201-21.886%2010.653c4.006%208.02%208.638%2015.67%2013.873%2022.848c21.142-6.58%2042.646-16.637%2064.815-33.213c5.316-56.288-9.08-105.09-38.056-148.36M85.474%20135.095c-12.645%200-23.015-11.805-23.015-26.18s10.149-26.2%2023.015-26.2s23.236%2011.804%2023.015%2026.2c.02%2014.375-10.148%2026.18-23.015%2026.18m85.051%200c-12.645%200-23.014-11.805-23.014-26.18s10.148-26.2%2023.014-26.2c12.867%200%2023.236%2011.804%2023.015%2026.2c0%2014.375-10.148%2026.18-23.015%2026.18%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%20199%22%3E%3Cpath%20fill%3D%22%235865f2%22%20d%3D%22M216.856%2016.597A208.5%20208.5%200%200%200%20164.042%200c-2.275%204.113-4.933%209.645-6.766%2014.046q-29.538-4.442-58.533%200c-1.832-4.4-4.55-9.933-6.846-14.046a207.8%20207.8%200%200%200-52.855%2016.638C5.618%2067.147-3.443%20116.4%201.087%20164.956c22.169%2016.555%2043.653%2026.612%2064.775%2033.193A161%20161%200%200%200%2079.735%20175.3a136.4%20136.4%200%200%201-21.846-10.632a109%20109%200%200%200%205.356-4.237c42.122%2019.702%2087.89%2019.702%20129.51%200a132%20132%200%200%200%205.355%204.237a136%20136%200%200%201-21.886%2010.653c4.006%208.02%208.638%2015.67%2013.873%2022.848c21.142-6.58%2042.646-16.637%2064.815-33.213c5.316-56.288-9.08-105.09-38.056-148.36M85.474%20135.095c-12.645%200-23.015-11.805-23.015-26.18s10.149-26.2%2023.015-26.2s23.236%2011.804%2023.015%2026.2c.02%2014.375-10.148%2026.18-23.015%2026.18m85.051%200c-12.645%200-23.014-11.805-23.014-26.18s10.148-26.2%2023.014-26.2c12.867%200%2023.236%2011.804%2023.015%2026.2c0%2014.375-10.148%2026.18-23.015%2026.18%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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