shopify-polaris-icons

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shopify Polaris Icons Skill

Shopify Polaris Icons 教程

Polaris Icons is Shopify's official icon library with 400+ carefully designed icons focused on commerce and entrepreneurship. These icons are designed to work seamlessly with the Polaris Design System.

Polaris Icons 是 Shopify 官方图标库，包含400+ 精心设计的图标，主打电商和创业场景，专为与Polaris设计系统无缝适配打造。

Installation

安装

bash

npm install @shopify/polaris-icons

bash

npm install @shopify/polaris-icons

or

或

yarn add @shopify/polaris-icons


> [!NOTE]
> The `@shopify/polaris-icons` package is typically installed alongside `@shopify/polaris`. If you're using Polaris, you likely already have access to these icons.

yarn add @shopify/polaris-icons


> [!NOTE]
> `@shopify/polaris-icons` 包通常和 `@shopify/polaris` 一同安装，如果你已经在使用Polaris，大概率已经可以直接调用这些图标。

Basic Usage

基础使用

With Polaris Icon Component (Recommended)

搭配Polaris Icon组件使用（推荐）

jsx

import { Icon } from '@shopify/polaris';
import { PlusCircleIcon } from '@shopify/polaris-icons';

function MyComponent() {
  return <Icon source={PlusCircleIcon} />;
}

jsx

import { Icon } from '@shopify/polaris';
import { PlusCircleIcon } from '@shopify/polaris-icons';

function MyComponent() {
  return <Icon source={PlusCircleIcon} />;
}

With Accessibility Label

添加无障碍标签

When an icon appears without accompanying text, always provide an accessibility label:

jsx

import { Icon } from '@shopify/polaris';
import { DeleteIcon } from '@shopify/polaris-icons';

function DeleteButton() {
  return (
    <button>
      <Icon source={DeleteIcon} accessibilityLabel="Delete item" />
    </button>
  );
}

当图标没有配套说明文字时，必须提供无障碍标签：

jsx

import { Icon } from '@shopify/polaris';
import { DeleteIcon } from '@shopify/polaris-icons';

function DeleteButton() {
  return (
    <button>
      <Icon source={DeleteIcon} accessibilityLabel="Delete item" />
    </button>
  );
}

Icon Tones

图标色调

Use the

tone

prop to set the icon color semantically:

jsx

import { Icon } from '@shopify/polaris';
import { AlertCircleIcon, CheckCircleIcon, InfoIcon } from '@shopify/polaris-icons';

// Available tones
<Icon source={CheckCircleIcon} tone="success" />    // Green - positive actions
<Icon source={AlertCircleIcon} tone="critical" />   // Red - errors, destructive
<Icon source={AlertCircleIcon} tone="warning" />    // Yellow - warnings
<Icon source={AlertCircleIcon} tone="caution" />    // Orange - caution
<Icon source={InfoIcon} tone="info" />              // Blue - information
<Icon source={InfoIcon} tone="base" />              // Default text color
<Icon source={InfoIcon} tone="subdued" />           // Muted/secondary
<Icon source={InfoIcon} tone="interactive" />       // Link/action color
<Icon source={InfoIcon} tone="inherit" />           // Inherit from parent
<Icon source={InfoIcon} tone="magic" />             // AI/Magic features
<Icon source={InfoIcon} tone="emphasis" />          // Emphasized content
<Icon source={InfoIcon} tone="primary" />           // Primary brand color

使用

tone

属性语义化设置图标颜色：

jsx

import { Icon } from '@shopify/polaris';
import { AlertCircleIcon, CheckCircleIcon, InfoIcon } from '@shopify/polaris-icons';

// 可用色调
<Icon source={CheckCircleIcon} tone="success" />    // 绿色 - 正向操作
<Icon source={AlertCircleIcon} tone="critical" />   // 红色 - 错误、破坏性操作
<Icon source={AlertCircleIcon} tone="warning" />    // 黄色 - 警告
<Icon source={AlertCircleIcon} tone="caution" />    // 橙色 - 注意提示
<Icon source={InfoIcon} tone="info" />              // 蓝色 - 信息提示
<Icon source={InfoIcon} tone="base" />              // 默认文字颜色
<Icon source={InfoIcon} tone="subdued" />           // 弱化/次要内容颜色
<Icon source={InfoIcon} tone="interactive" />       // 链接/操作色
<Icon source={InfoIcon} tone="inherit" />           // 继承父元素颜色
<Icon source={InfoIcon} tone="magic" />             // AI/魔法功能色
<Icon source={InfoIcon} tone="emphasis" />          // 强调内容色
<Icon source={InfoIcon} tone="primary" />           // 品牌主色

Icon Naming Convention

图标命名规范

All icons follow a consistent naming pattern:

{Name}Icon

jsx

// Examples
import {
  HomeIcon,           // Navigation
  ProductIcon,        // Commerce
  OrderIcon,          // Orders
  CustomerIcon,       // Customers
  SettingsIcon,       // Settings
  PlusIcon,           // Actions
  EditIcon,           // Actions
  DeleteIcon,         // Actions
  SearchIcon,         // Search
  FilterIcon,         // Filtering
} from '@shopify/polaris-icons';

所有图标都遵循统一命名规则：

{名称}Icon

jsx

// 示例
import {
  HomeIcon,           // 导航
  ProductIcon,        // 电商
  OrderIcon,          // 订单
  CustomerIcon,       // 客户
  SettingsIcon,       // 设置
  PlusIcon,           // 操作
  EditIcon,           // 操作
  DeleteIcon,         // 操作
  SearchIcon,         // 搜索
  FilterIcon,         // 筛选
} from '@shopify/polaris-icons';

Common Icon Categories

常用图标分类

Navigation & Layout

导航与布局

jsx

import {
  HomeIcon,
  MenuIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  ChevronUpIcon,
  ChevronDownIcon,
  ArrowLeftIcon,
  ArrowRightIcon,
  ExternalIcon,
  MaximizeIcon,
  MinimizeIcon,
} from '@shopify/polaris-icons';

jsx

import {
  HomeIcon,
  MenuIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  ChevronUpIcon,
  ChevronDownIcon,
  ArrowLeftIcon,
  ArrowRightIcon,
  ExternalIcon,
  MaximizeIcon,
  MinimizeIcon,
} from '@shopify/polaris-icons';

Commerce & Products

电商与商品

jsx

import {
  ProductIcon,
  CollectionIcon,
  InventoryIcon,
  PriceTagIcon,          // Renamed from TagIcon
  GiftCardIcon,
  DiscountIcon,
  CartIcon,
  CartAbandonedIcon,
  StorefrontIcon,
} from '@shopify/polaris-icons';

jsx

import {
  ProductIcon,
  CollectionIcon,
  InventoryIcon,
  PriceTagIcon,          // 原TagIcon重命名而来
  GiftCardIcon,
  DiscountIcon,
  CartIcon,
  CartAbandonedIcon,
  StorefrontIcon,
} from '@shopify/polaris-icons';

Orders & Fulfillment

订单与履约

jsx

import {
  OrderIcon,
  OrderDraftIcon,
  OrderFulfilledIcon,
  DeliveryIcon,
  ShippingLabelIcon,
  PackageIcon,
  ReturnIcon,
  RefundIcon,
} from '@shopify/polaris-icons';

jsx

import {
  OrderIcon,
  OrderDraftIcon,
  OrderFulfilledIcon,
  DeliveryIcon,
  ShippingLabelIcon,
  PackageIcon,
  ReturnIcon,
  RefundIcon,
} from '@shopify/polaris-icons';

Customers & Users

客户与用户

jsx

import {
  CustomerIcon,
  CustomerPlusIcon,
  PersonIcon,
  PersonAddIcon,
  TeamIcon,
  ProfileIcon,
} from '@shopify/polaris-icons';

jsx

import {
  CustomerIcon,
  CustomerPlusIcon,
  PersonIcon,
  PersonAddIcon,
  TeamIcon,
  ProfileIcon,
} from '@shopify/polaris-icons';

Actions

操作类

jsx

import {
  PlusIcon,
  PlusCircleIcon,
  MinusIcon,
  MinusCircleIcon,
  EditIcon,
  DeleteIcon,
  DuplicateIcon,
  ArchiveIcon,
  SaveIcon,
  UndoIcon,
  RedoIcon,
  RefreshIcon,
  ImportIcon,
  ExportIcon,
  UploadIcon,
  DownloadIcon,
} from '@shopify/polaris-icons';

jsx

import {
  PlusIcon,
  PlusCircleIcon,
  MinusIcon,
  MinusCircleIcon,
  EditIcon,
  DeleteIcon,
  DuplicateIcon,
  ArchiveIcon,
  SaveIcon,
  UndoIcon,
  RedoIcon,
  RefreshIcon,
  ImportIcon,
  ExportIcon,
  UploadIcon,
  DownloadIcon,
} from '@shopify/polaris-icons';

Status & Feedback

状态与反馈

jsx

import {
  CheckIcon,
  CheckCircleIcon,
  XIcon,
  XCircleIcon,
  AlertCircleIcon,
  AlertTriangleIcon,
  InfoIcon,
  QuestionCircleIcon,
  ClockIcon,
  CalendarIcon,
} from '@shopify/polaris-icons';

jsx

import {
  CheckIcon,
  CheckCircleIcon,
  XIcon,
  XCircleIcon,
  AlertCircleIcon,
  AlertTriangleIcon,
  InfoIcon,
  QuestionCircleIcon,
  ClockIcon,
  CalendarIcon,
} from '@shopify/polaris-icons';

Communication

沟通类

jsx

import {
  EmailIcon,
  ChatIcon,
  NotificationIcon,
  BellIcon,
  PhoneIcon,
  SendIcon,
  NoteIcon,
} from '@shopify/polaris-icons';

jsx

import {
  EmailIcon,
  ChatIcon,
  NotificationIcon,
  BellIcon,
  PhoneIcon,
  SendIcon,
  NoteIcon,
} from '@shopify/polaris-icons';

Settings & Tools

设置与工具

jsx

import {
  SettingsIcon,
  ToolsIcon,
  KeyIcon,
  LockIcon,
  UnlockIcon,
  EyeIcon,
  HideIcon,
  FilterIcon,
  SortIcon,
  SearchIcon,
  CodeIcon,
  ApiIcon,
} from '@shopify/polaris-icons';

jsx

import {
  SettingsIcon,
  ToolsIcon,
  KeyIcon,
  LockIcon,
  UnlockIcon,
  EyeIcon,
  HideIcon,
  FilterIcon,
  SortIcon,
  SearchIcon,
  CodeIcon,
  ApiIcon,
} from '@shopify/polaris-icons';

Analytics & Reports

分析与报表

jsx

import {
  AnalyticsIcon,
  ChartVerticalIcon,
  ChartHorizontalIcon,
  ReportIcon,
  TrendingUpIcon,
  TrendingDownIcon,
} from '@shopify/polaris-icons';

jsx

import {
  AnalyticsIcon,
  ChartVerticalIcon,
  ChartHorizontalIcon,
  ReportIcon,
  TrendingUpIcon,
  TrendingDownIcon,
} from '@shopify/polaris-icons';

Media

媒体类

jsx

import {
  ImageIcon,
  ImageAltIcon,
  VideoIcon,
  FileIcon,
  FolderIcon,
  AttachmentIcon,
  LinkIcon,
} from '@shopify/polaris-icons';

jsx

import {
  ImageIcon,
  ImageAltIcon,
  VideoIcon,
  FileIcon,
  FolderIcon,
  AttachmentIcon,
  LinkIcon,
} from '@shopify/polaris-icons';

AI & Magic (Shopify Magic)

AI与魔法功能（Shopify Magic）

jsx

import {
  MagicIcon,
  SparklesIcon,        // AI-generated content
  WandIcon,
} from '@shopify/polaris-icons';

jsx

import {
  MagicIcon,
  SparklesIcon,        // AI生成内容相关
  WandIcon,
} from '@shopify/polaris-icons';

Usage in Polaris Components

在Polaris组件中使用

Button with Icon

带图标的按钮

jsx

import { Button } from '@shopify/polaris';
import { PlusIcon, DeleteIcon } from '@shopify/polaris-icons';

// Icon before text
<Button icon={PlusIcon}>Add product</Button>

// Destructive action
<Button icon={DeleteIcon} variant="primary" tone="critical">
  Delete
</Button>

// Icon-only button (requires accessibilityLabel)
<Button icon={EditIcon} accessibilityLabel="Edit product" />

jsx

import { Button } from '@shopify/polaris';
import { PlusIcon, DeleteIcon } from '@shopify/polaris-icons';

// 图标在文字左侧
<Button icon={PlusIcon}>Add product</Button>

// 破坏性操作
<Button icon={DeleteIcon} variant="primary" tone="critical">
  Delete
</Button>

// 仅展示图标的按钮（必须提供accessibilityLabel）
<Button icon={EditIcon} accessibilityLabel="Edit product" />

TextField with Icon

带图标的输入框

jsx

import { TextField } from '@shopify/polaris';
import { SearchIcon } from '@shopify/polaris-icons';

<TextField
  label="Search"
  prefix={<Icon source={SearchIcon} />}
  placeholder="Search products..."
/>

jsx

import { TextField } from '@shopify/polaris';
import { SearchIcon } from '@shopify/polaris-icons';

<TextField
  label="Search"
  prefix={<Icon source={SearchIcon} />}
  placeholder="Search products..."
/>

Banner with Icon

带图标的横幅

jsx

import { Banner, Icon } from '@shopify/polaris';
import { AlertCircleIcon } from '@shopify/polaris-icons';

<Banner
  title="Warning"
  tone="warning"
  icon={AlertCircleIcon}
>
  Please review your settings.
</Banner>

jsx

import { Banner, Icon } from '@shopify/polaris';
import { AlertCircleIcon } from '@shopify/polaris-icons';

<Banner
  title="Warning"
  tone="warning"
  icon={AlertCircleIcon}
>
  请检查你的设置。
</Banner>

Navigation Item

导航项

jsx

import { Navigation } from '@shopify/polaris';
import { HomeIcon, OrderIcon, ProductIcon } from '@shopify/polaris-icons';

<Navigation location="/">
  <Navigation.Section
    items={[
      { label: 'Home', icon: HomeIcon, url: '/' },
      { label: 'Orders', icon: OrderIcon, url: '/orders' },
      { label: 'Products', icon: ProductIcon, url: '/products' },
    ]}
  />
</Navigation>

jsx

import { Navigation } from '@shopify/polaris';
import { HomeIcon, OrderIcon, ProductIcon } from '@shopify/polaris-icons';

<Navigation location="/">
  <Navigation.Section
    items={[
      { label: 'Home', icon: HomeIcon, url: '/' },
      { label: 'Orders', icon: OrderIcon, url: '/orders' },
      { label: 'Products', icon: ProductIcon, url: '/products' },
    ]}
  />
</Navigation>

Accessibility Best Practices

无障碍最佳实践

Decorative Icons: When an icon accompanies text that already describes the action, the icon is decorative and doesn't need a label:
jsx
```
<Button icon={PlusIcon}>Add product</Button>
// No accessibilityLabel needed - "Add product" describes the action
```

Standalone Icons: When an icon appears without text, always provide an

accessibilityLabel

jsx

<Button icon={EditIcon} accessibilityLabel="Edit product" />

Status Icons: For icons that convey important status information:

jsx

<Icon source={CheckCircleIcon} tone="success" accessibilityLabel="Completed" />

装饰性图标：如果图标旁边已经有描述对应操作的文字，图标属于装饰性质，不需要额外添加标签：
jsx
```
<Button icon={PlusIcon}>Add product</Button>
// 不需要accessibilityLabel，"Add product"已经描述了操作含义
```

独立图标：如果图标没有配套文字，必须添加

accessibilityLabel

：

jsx

<Button icon={EditIcon} accessibilityLabel="Edit product" />

状态图标：用于传递重要状态信息的图标需要添加标签：

jsx

<Icon source={CheckCircleIcon} tone="success" accessibilityLabel="Completed" />

Anti-Patterns to Avoid

需要避免的错误用法

DO NOT use icons without context. Pair with text or provide accessibility labels.
DO NOT use non-Polaris icons in a Polaris app. This breaks visual consistency.
DO NOT manually set icon colors with CSS. Use the
```
tone
```
prop instead.
DO NOT resize icons using CSS. Polaris icons are designed for a 20x20 viewport.
DO NOT use icons for decoration only. Each icon should have semantic meaning.

禁止无上下文使用图标，要么搭配文字要么提供无障碍标签。
禁止在Polaris应用中使用非Polaris图标，会破坏视觉一致性。
禁止用CSS手动设置图标颜色，请使用
```
tone
```
属性。
禁止用CSS调整图标大小，Polaris图标默认适配20x20视口。
禁止仅将图标用作纯装饰，每个图标都应该具备语义含义。

References

参考文档

Icon Categories - Complete categorized list of all Polaris icons
Migration Guide - Guide for migrating from older icon versions

图标分类 - 所有Polaris图标的完整分类列表
迁移指南 - 旧版本图标迁移指南

External Resources

外部资源

Polaris Icons Browser - Search and browse all icons
Icon Component Docs - Official component documentation
NPM Package - Package information and changelog

Polaris图标浏览器 - 搜索和浏览全部图标
Icon组件文档 - 官方组件文档
NPM包页面 - 包信息和更新日志