or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdcore-components.mdicon-font.mdindex.mdindividual-icons.md
tile.json

tessl/npm-ant-design--icons

React icon components library providing 800+ high-quality SVG icons with three themes (Outlined, Filled, Two-tone) for Ant Design applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@ant-design/icons@6.0.x

To install, run

npx @tessl/cli install tessl/npm-ant-design--icons@6.0.0

index.mddocs/

@ant-design/icons

React icon components library providing 831 high-quality SVG icons with three distinct visual themes (Outlined, Filled, Two-tone). The library offers tree-shaking support for optimal bundle sizes, TypeScript definitions for type safety, and a flexible API supporting both named imports and global configuration. Icons are designed specifically for React applications and integrate seamlessly with the Ant Design ecosystem, though they can be used independently.

Package Information

  • Package Name: @ant-design/icons
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @ant-design/icons

Core Imports

import { StarOutlined, StarFilled, StarTwoTone } from "@ant-design/icons";
import Icon from "@ant-design/icons"; // Default export

CommonJS:

const { StarOutlined, StarFilled, StarTwoTone } = require("@ant-design/icons");

For icon management utilities:

import { createFromIconfontCN, getTwoToneColor, setTwoToneColor } from "@ant-design/icons";

Basic Usage

import React from "react";
import { StarOutlined, StarFilled, HeartTwoTone } from "@ant-design/icons";
import Icon from "@ant-design/icons";

// Custom SVG component
const CustomSvg = () => (
  <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
    <path d="M512 64L64 512l448 448 448-448L512 64z" />
  </svg>
);

function MyComponent() {
  return (
    <div>
      {/* Basic icon usage */}
      <StarOutlined />
      <StarFilled />
      
      {/* Icon with custom styling */}
      <StarOutlined style={{ fontSize: '16px', color: '#08c' }} />
      
      {/* Animated icon */}
      <StarOutlined spin />
      
      {/* Rotated icon */}
      <StarOutlined rotate={180} />
      
      {/* Two-tone icon with custom colors */}
      <HeartTwoTone twoToneColor="#eb2f96" />
      
      {/* Custom icon using Icon component */}
      <Icon component={CustomSvg} />
      <Icon component={CustomSvg} spin />
    </div>
  );
}

Architecture

@ant-design/icons is built around several key components:

  • Individual Icon Components: 831 tree-shakeable React components, each representing a unique icon
  • Base Components: Core Icon, AntdIcon, and IconBase components providing rendering infrastructure
  • Theme System: Three visual themes (Outlined, Filled, Two-tone) with consistent naming patterns
  • Configuration System: Global settings via React Context and two-tone color management
  • Icon Font Integration: Support for custom icon fonts via createFromIconfontCN
  • Style System: CSP-compliant style injection with automatic CSS generation

Capabilities

Individual Icons

831 individual icon components organized by visual theme, providing comprehensive coverage of common UI elements, actions, and symbols.

// Outlined icons (447 total)
const AccountBookOutlined: React.ForwardRefExoticComponent<
  AntdIconProps & React.RefAttributes<HTMLSpanElement>
>;

// Filled icons (234 total)  
const AccountBookFilled: React.ForwardRefExoticComponent<
  AntdIconProps & React.RefAttributes<HTMLSpanElement>
>;

// Two-tone icons (150 total)
const AccountBookTwoTone: React.ForwardRefExoticComponent<
  AntdIconProps & React.RefAttributes<HTMLSpanElement>
>;

Individual Icons

Core Icon Component

Base icon component with customization options for rotation, spinning animations, and custom SVG rendering.

const Icon: React.ForwardRefExoticComponent<
  Omit<IconComponentProps, 'ref'> & React.RefAttributes<HTMLSpanElement>
>;

interface IconComponentProps extends IconBaseProps {
  viewBox?: string;
  component?: React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>>;
  ariaLabel?: React.AriaAttributes['aria-label'];
}

interface IconBaseProps extends React.HTMLProps<HTMLSpanElement> {
  spin?: boolean;
  rotate?: number;
}

Core Components

Icon Font Integration

Create icon components from external icon fonts, particularly iconfont.cn, with full TypeScript support.

function createFromIconfontCN<T extends string = string>(
  options?: CustomIconOptions
): React.FC<IconFontProps<T>>;

interface CustomIconOptions {
  scriptUrl?: string | string[];
  extraCommonProps?: Record<string, unknown>;
}

interface IconFontProps<T extends string = string> extends IconBaseProps {
  type: T;
}

Icon Font Integration

Global Configuration

React Context provider for global icon settings and two-tone color management utilities.

const IconProvider: React.Provider<IconContextProps>;

interface IconContextProps {
  prefixCls?: string;
  rootClassName?: string;
  csp?: { nonce?: string };
  layer?: string;
}

type TwoToneColor = string | [string, string];

function setTwoToneColor(twoToneColor: TwoToneColor): void;
function getTwoToneColor(): TwoToneColor;

Global Configuration

Types

interface AntdIconProps extends IconBaseProps {
  twoToneColor?: TwoToneColor;
}

interface IconBaseProps extends React.HTMLProps<HTMLSpanElement> {
  spin?: boolean;
  rotate?: number;
}

type TwoToneColor = string | [string, string];

interface CustomIconComponentProps {
  width: string | number;
  height: string | number;
  fill?: string;
  viewBox?: string;
  className?: string;
  style?: React.CSSProperties;
}

interface IconDefinition {
  name: string;
  theme: string;
  icon: ((primaryColor: string, secondaryColor: string) => any) | any;
}