Icons

Ant Design Discord Outlined Icon

IconStash indexes the Discord Outlined icon from Ant Design Icons alongside 134,701 icons from 28 open-source libraries. It uses stroked lines with no fill — clean, legible, and versatile at any size, making it well suited for general-purpose product UIs, design systems, component libraries, web applications, and marketing sites. Set an exact pixel size from 16px to 512px and download a lossless PNG in one click.

Open in editor Browse Ant Design Icons

Interactive Customizer

1.5px
128px

About this icon

Use the Discord Outlined icon

The Discord Outlined icon from Ant Design Icons fits naturally in general-purpose product UIs, design systems, component libraries, web applications, and marketing sites. Its outline style makes it ideal for app navigation bars, toolbar buttons, form labels, and UI controls where clarity at 16–24px is critical.

Open it in IconStash to set stroke color via presets or a custom hex value, choose an exact pixel size (16–512px), control stroke width (0.1–3px), and preview against dark, light, or checkered backgrounds before downloading.

Export formats

Copy clean SVG vectors with one click, generate custom-size PNG files from 16px to 512px, export JSX/React components ready to paste into your project, or use the icon as a CSS background-mask for flexible theming.

All exports are based on the same editable vector — so the Discord Outlined icon stays pixel-perfect at 16px, 24px, 48px, and any large marketing size.

Design & UX integration

Aesthetic characteristics

Discord Outlined comes from Ant Design, the enterprise React framework, and follows its three-theme model: Outlined, Filled and TwoTone. TwoTone adds a secondary colour layer, which Ant Design uses to pull the eye toward primary actions in otherwise dense admin screens.

UX best practices

As a general interface glyph, the Discord Outlined icon does its job best between 16px and 24px, sitting next to a text label. Icon-only treatments work for a small set of universally understood actions, but comprehension falls off quickly once the action is specific to your product — so when in doubt, add the word.

Use in your project

React / npm — Ant Design Icons

npm install @ant-design/icons

import { DiscordOutlinedOutlined } from '@ant-design/icons';

// JSX usage:
<DiscordOutlinedOutlined style={{ fontSize: '24px' }} />

Copy the SVG markup directly from the IconStash editor to use the Discord Outlined icon without any npm package — paste it into HTML, JSX, or a design tool.

Inline SVG (copy & paste)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="discord-outlined icon"><path fill="currentColor" fill-rule="evenodd" d="M404.992 158L380 161.008s-112.128 12.256-194.016 78.016h-.96l-1.024.96c-18.368 16.896-26.368 37.664-39.008 68.032a982 982 0 0 0-37.984 112C83.264 505.872 64 609.872 64 705.008v8l4 8c29.632 52 82.24 85.12 131.008 108c48.736 22.88 90.88 35.008 120 36l19.008.992L348 849.008l35.008-62.016c37.12 8.384 79.872 14.016 128.992 14.016s91.872-5.632 128.992-14.016L676 849.008L686.016 866l18.976-.992c29.12-.992 71.264-13.12 120-36c48.768-22.88 101.376-56 131.008-108l4-8v-8c0-95.136-19.264-199.136-43.008-284.992a982 982 0 0 0-37.984-112c-12.64-30.4-20.64-51.136-39.008-68l-.992-1.024h-1.024C756.16 173.264 644 161.008 644 161.008L619.008 158l-9.024 23.008s-9.248 23.36-14.976 50.016A643 643 0 0 0 512 225.008c-17.12 0-46.72 1.12-83.008 6.016c-5.76-26.656-15.008-50.016-15.008-50.016zm-44 73.024c1.376 4.48 2.752 8.352 4 12c-41.376 10.24-85.504 25.856-125.984 50.976l33.984 54.016C356 296.496 475.232 289.008 512 289.008c36.736 0 156 7.488 239.008 59.008L784.992 294c-40.48-25.12-84.608-40.736-125.984-51.008c1.248-3.616 2.624-7.488 4-12c29.856 6.016 86.88 19.776 133.984 57.024c-.256.128 12 18.624 23.008 44.992c11.264 27.136 23.744 63.264 35.008 104c21.632 78.112 38.624 173.248 40 256.992c-20.16 30.752-57.504 58.496-97.024 77.024A311.8 311.8 0 0 1 720 795.984l-16-26.976c9.504-3.52 18.88-7.36 27.008-11.008c49.248-21.632 76-44.992 76-44.992l-42.016-48s-17.984 16.512-60 35.008C663.04 718.512 598.88 737.008 512 737.008s-151.008-18.496-192.992-36.992c-42.016-18.496-60-35.008-60-35.008l-42.016 48s26.752 23.36 76 44.992A425 425 0 0 0 320 769.008l-16 27.008a311.8 311.8 0 0 1-78.016-25.024c-39.488-18.496-76.864-46.24-96.96-76.992c1.344-83.744 18.336-178.88 40-256.992a917 917 0 0 1 34.976-104c11.008-26.368 23.264-44.864 23.008-44.992c47.104-37.248 104.128-51.008 133.984-56.992M400 449.008c-24.736 0-46.624 14.112-60 32s-20 39.872-20 64s6.624 46.112 20 64s35.264 32 60 32s46.624-14.112 60-32s20-39.872 20-64s-6.624-46.112-20-64s-35.264-32-60-32m224 0c-24.736 0-46.624 14.112-60 32s-20 39.872-20 64s6.624 46.112 20 64s35.264 32 60 32s46.624-14.112 60-32s20-39.872 20-64s-6.624-46.112-20-64s-35.264-32-60-32m-224 64c1.76 0 4 .64 8 6.016c4 5.344 8 14.72 8 25.984s-4 20.64-8 26.016c-4 5.344-6.24 5.984-8 5.984s-4-.64-8-6.016a44.83 44.83 0 0 1-8-25.984c0-11.264 4-20.64 8-26.016c4-5.344 6.24-5.984 8-5.984m224 0c1.76 0 4 .64 8 6.016c4 5.344 8 14.72 8 25.984s-4 20.64-8 26.016c-4 5.344-6.24 5.984-8 5.984s-4-.64-8-6.016a44.83 44.83 0 0 1-8-25.984c0-11.264 4-20.64 8-26.016c4-5.344 6.24-5.984 8-5.984"/></svg>

Library & related icons

About Ant Design Icons

Official icon library for Ant Design — China's leading enterprise React UI framework. 1,800+ icons in Outlined, Filled, and TwoTone styles.

  • Total icons: 1,870+
  • Style: multi-style
  • License: MIT
  • npm package: @ant-design/icons
Browse all 1,870 Ant Design Icons icons →

People also search for

Ant Design Alert Filled IconAnt Design Exception IconAnt Design Aim Outlined IconAnt Design Taobao Square Fill IconAnt Design Euro Outline IconAnt Design Taobao Square Icon

Frequently asked questions

What is the Discord Outlined icon?

The Discord Outlined icon is a outline-style SVG icon from the Ant Design Icons library, categorized under Interface. It is designed for use in general-purpose product UIs, design systems, component libraries, web applications, and marketing sites. On IconStash you can preview it, customize its color and size, and export it in SVG, PNG, JSX, or CSS formats directly from your browser.

Is the Discord Outlined icon free to use?

Yes. Ant Design Icons is licensed under MIT, making it free for personal and commercial use. This means you can freely use the Discord Outlined icon in personal, commercial, and open-source projects. IconStash provides SVG and PNG access at no cost with no login required.

How do I use the Discord Outlined icon in React?

Install the package with `npm install @ant-design/icons`, then import the component into your React file. IconStash's detail panel shows you the exact npm command, import statement, and JSX usage snippet for every icon — just click the Code tab and copy with one click.

What is the Ant Design Icons icon library?

Official icon library for Ant Design — China's leading enterprise React UI framework. 1,800+ icons in Outlined, Filled, and TwoTone styles. It contains 1,870+ icons. IconStash indexes the complete Ant Design Icons collection alongside 27 other open-source libraries — 134,701 icons total — in a single unified search interface.

Can I download the Discord Outlined icon as a PNG?

Yes. Open the Discord Outlined icon in IconStash, set your desired pixel size (16px to 512px) in the detail panel, and click Download PNG. You can also export a multi-resolution ZIP pack containing 16, 24, 32, 48, 64, 128, 256, and 512px PNGs with a single click.

What does the outline icon style mean?

An icon in outline style uses stroked lines with no fill — clean, legible, and versatile at any size. This style is best suited for app navigation bars, toolbar buttons, form labels, and UI controls where clarity at 16–24px is critical. The Ant Design Icons Discord Outlined icon follows this visual convention throughout the Ant Design Icons design system.

Can I change the Discord Outlined icon's color and size before downloading?

Yes. In IconStash's editor panel, choose from six color presets (blue, slate, green, purple, red, teal) or enter a custom hex value. Drag the size slider (16–256px) or type an exact pixel value up to 512px. Changes apply instantly to the SVG preview, the PNG output, and the copied code.