Ant Design Icons
Ant Design Icons is the official, meticulously crafted icon set powering Ant Design (AntD), one of the world's most dominant and battle-tested React UI frameworks. Originally developed by Alibaba for their massive internal enterprise platforms, this library provides an incredibly comprehensive collection of icons designed specifically for data-dense dashboards, complex B2B SaaS applications, financial interfaces, and administrative panels where clarity and consistency are absolutely paramount. What truly separates Ant Design Icons from the vast sea of generic icon libraries is its strict adherence to a unified visual language and its unique tri-thematic approach. The library includes over 840 distinct icons, but almost every icon is offered in three highly polished stylistic themes: Outlined, Filled, and TwoTone. The 'Outlined' style provides a clinical, precise, and airy feel perfect for modern minimalist interfaces. The 'Filled' style offers visual weight and prominence, ideal for active states or primary navigation elements. However, the crown jewel is the 'TwoTone' variant—a rare feature in open-source libraries that allows developers to define both a primary and secondary color palette via props, enabling the creation of beautiful, illustrative micro-graphics without the overhead of custom SVGs. Every single icon is constructed on a strict, mathematically precise grid, ensuring pixel-perfect alignment when placed alongside typography and other Ant Design UI components. The collection is licensed under MIT; review the icon license guide for commercial-use details.
Ant Design Icons Specifications & Framework Compatibility
| Property | Specification Details |
|---|---|
| Total Icons | 1,870 vector SVG icons |
| License | MIT (Commercial & Personal Use) |
| TypeScript Support | Native .d.ts definitions included |
| Framework Support | React, Next.js, Vue, Svelte, Tailwind CSS |
| Primary NPM Package | @ant-design/icons |
| Source Repository | Official GitHub Repository → |
How many icons does Ant Design Icons have?
Ant Design Icons currently includes 1,870 vector icons indexed in the IconSearch catalog. Every icon is available in clean SVG format with customizable stroke widths, colors, and direct multi-framework code exports for modern web applications.
Is Ant Design Icons free for commercial use?
Yes, Ant Design Icons is distributed under the MIT license. This permissive open-source license allows unrestricted commercial and personal usage in proprietary software, SaaS platforms, client websites, and digital products without licensing fees.
How do you install and use Ant Design Icons in React, Next.js, and Vue?
Install the package using npm install @ant-design/icons, then import icons directly into your JSX, TSX, or Vue components. Alternatively, copy raw customized SVG markup directly from IconSearch with zero client-side JavaScript overhead.
// Install package
npm install @ant-design/icons
// React & Next.js App Router usage
import { AccountBookFilled } from '@ant-design/icons'
export default function Header() {
return <AccountBookFilled className="w-5 h-5 text-indigo-500" />
}Ant Design Icons FAQ & Technical Guide
Are Ant Design Icons completely free for commercial use?
Yes, absolutely. The Ant Design Icons library is fully open-source and released under the highly permissive MIT license. This makes them entirely free for both personal and commercial projects, with no attribution required in the UI.
Do I have to use the Ant Design UI framework to use these icons?
No, not at all! The `@ant-design/icons` package is completely standalone and isolated from the main AntD component library. You can use it in any React project regardless of whether you use Tailwind, Material UI, Bootstrap, or plain CSS.
How do I color the TwoTone icons properly?
TwoTone icons accept a special `twoToneColor` prop. For a single primary color, pass a string: `<SmileTwoTone twoToneColor="#eb2f96" />`. If you want full control over both colors, pass an array: `twoToneColor={['#1890ff', '#e6f7ff']}` where the first is primary and second is the secondary fill.
How do I make Ant Design Icons bigger or smaller?
Unlike some libraries that use a specific `size` prop, Ant Design Icons natively scale with the CSS `font-size` property. You can adjust their size using inline styles like `style={{ fontSize: '32px' }}` or by using utility classes like Tailwind's `text-3xl` or `text-[40px]`.
Why are my Ant Design icons not tree-shaking, making my bundle huge?
This is almost always due to incorrect import syntax. Ensure you are using specific named imports from the root package, like `import { HomeOutlined } from '@ant-design/icons'`. Do not use default wildcard imports, as that instructs your bundler to evaluate the entire library.
Can I use Ant Design Icons in Vue or vanilla HTML?
Yes! While the React package is the most popular, there are official companion packages: `@ant-design/icons-vue` for Vue 3 applications, and `@ant-design/icons-svg` which provides the raw SVG definitions for vanilla HTML/JS usage.