@ant-design/icons

@ant-design/icons is the React package in the ant-design-icons monorepo, providing the complete Ant Design icon set (outlined, filled, and two-tone themes) as individually importable React components. It builds on the framework-agnostic @ant-design/icons-svg package, which stores the raw icon SVG abstract trees shared across the project’s React, Vue, Angular, and React Native bindings.

Each icon ships as its own component (e.g. <HomeOutlined />, <SmileFilled />) so bundlers can tree-shake unused icons, and a generic <Icon /> component plus utilities (createFromIconfontCN, color/CSS helpers) support rendering custom SVGs, iconfont sets, and applying theme colors at runtime.

What You Get

• Hundreds of pre-built React icon components across outlined, filled, and two-tone themes
• A generic <Icon /> component for rendering arbitrary custom SVG icon definitions
• createFromIconfontCN for integrating an Iconfont.cn symbol set as React components
• Color and CSS utilities for theming two-tone icons and applying custom styles at runtime
• Tree-shakeable per-icon imports so bundles only include the icons actually used

Common Use Cases

• Adding consistent iconography to a React app built with or alongside Ant Design (antd) components
• Rendering theme-aware two-tone icons that adapt their primary color to an app’s design tokens
• Wrapping a company’s custom icon font (via Iconfont.cn) as React components using createFromIconfontCN
• Building custom icon components on top of @ant-design/icons-svg’s shared abstract icon trees for non-React frameworks

Under The Hood

Architecture - packages/icons-react is one of five framework bindings (React, Vue, Angular, React Native, and the framework-agnostic icons-svg) in a Lerna-managed monorepo; the React package’s src/ splits concerns into icons/ (generated per-icon components), components/ (the generic Icon/AntdIcon wrapper), and standalone utility modules (colorUtils.ts, cssUtils.ts, renderUtils.ts, refUtils.ts) that the generated icon components all share. Tech Stack - TypeScript throughout, built with the monorepo’s own utoo/ut CLI tooling for cross-workspace generate/build/test/lint commands, targeting CJS, ESM, and UMD output formats declared in package.json’s exports map. Code Quality - the package has a dedicated test suite (multiple .test.tsx/.test.ts files) plus CI via GitHub Actions; icon components themselves are largely code-generated from icons-svg’s data rather than hand-written, which keeps the generated surface consistent at the cost of most of the repo being boilerplate rather than hand-authored logic. API Design - the per-icon component convention (<IconNameOutlined />, <IconNameFilled />, <IconNameTwoTone />) is highly discoverable and matches common icon-library ergonomics, while power users drop to the lower-level <Icon component={...} /> or createFromIconfontCN for fully custom icon sets.