---
title: Icons
sidebar_label: Icons
---

<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->

import { StoryWithControls } from '../../../src/components/StorybookWrapper';

# Icons

Icon library for Apache Superset. Contains over 200 icons based on Ant Design icons with consistent sizing and theming support.

## Live Example

<StoryWithControls
  component="Icons"
  renderComponent="Icons.InfoCircleOutlined"
  props={{
  iconSize: "xl"
}}
  controls={[
  {
    name: "iconSize",
    label: "Icon Size",
    type: "inline-radio",
    options: [
      "s",
      "m",
      "l",
      "xl",
      "xxl"
    ],
    description: "Size of the icons: s (12px), m (16px), l (20px), xl (24px), xxl (32px)."
  },
  {
    name: "showNames",
    label: "Show Names",
    type: "boolean"
  },
  {
    name: "iconColor",
    label: "Icon Color",
    type: "select"
  }
]}
/>

## Try It

Edit the code below to experiment with the component:

```tsx live
function Demo() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <Icons.InfoCircleOutlined iconSize="xl" />
      <Icons.CheckCircleOutlined iconSize="xl" />
      <Icons.WarningOutlined iconSize="xl" />
      <Icons.CloseCircleOutlined iconSize="xl" />
    </div>
  );
}
```

## Icon Sizes

```tsx live
function IconSizes() {
  const sizes = ['s', 'm', 'l', 'xl', 'xxl'];
  return (
    <div style={{ display: 'flex', gap: 24, alignItems: 'end' }}>
      {sizes.map(size => (
        <div key={size} style={{ textAlign: 'center' }}>
          <Icons.DatabaseOutlined iconSize={size} />
          <div style={{ fontSize: 12, marginTop: 8, color: '#666' }}>{size}</div>
        </div>
      ))}
    </div>
  );
}
```

## Icon Gallery

```tsx live
function IconGallery() {
  const Section = ({ title, children }) => (
    <div style={{ marginBottom: 24 }}>
      <div style={{ fontWeight: 600, marginBottom: 8, color: '#666' }}>{title}</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>{children}</div>
    </div>
  );
  return (
    <div>
      <Section title="Charts">
        <Icons.LineChartOutlined iconSize="xl" />
        <Icons.BarChartOutlined iconSize="xl" />
        <Icons.PieChartOutlined iconSize="xl" />
        <Icons.AreaChartOutlined iconSize="xl" />
        <Icons.DashboardOutlined iconSize="xl" />
        <Icons.FundProjectionScreenOutlined iconSize="xl" />
      </Section>
      <Section title="Data">
        <Icons.DatabaseOutlined iconSize="xl" />
        <Icons.TableOutlined iconSize="xl" />
        <Icons.ConsoleSqlOutlined iconSize="xl" />
        <Icons.FilterOutlined iconSize="xl" />
        <Icons.FieldNumberOutlined iconSize="xl" />
        <Icons.FieldTimeOutlined iconSize="xl" />
        <Icons.FunctionOutlined iconSize="xl" />
        <Icons.CalculatorOutlined iconSize="xl" />
      </Section>
      <Section title="Actions">
        <Icons.PlusOutlined iconSize="xl" />
        <Icons.EditOutlined iconSize="xl" />
        <Icons.DeleteOutlined iconSize="xl" />
        <Icons.CopyOutlined iconSize="xl" />
        <Icons.SaveOutlined iconSize="xl" />
        <Icons.DownloadOutlined iconSize="xl" />
        <Icons.UploadOutlined iconSize="xl" />
        <Icons.ReloadOutlined iconSize="xl" />
        <Icons.SyncOutlined iconSize="xl" />
        <Icons.SearchOutlined iconSize="xl" />
        <Icons.ExpandOutlined iconSize="xl" />
        <Icons.FullscreenOutlined iconSize="xl" />
        <Icons.ShareAltOutlined iconSize="xl" />
        <Icons.ExportOutlined iconSize="xl" />
      </Section>
      <Section title="Status">
        <Icons.CheckOutlined iconSize="xl" />
        <Icons.CheckCircleOutlined iconSize="xl" />
        <Icons.CloseOutlined iconSize="xl" />
        <Icons.CloseCircleOutlined iconSize="xl" />
        <Icons.InfoCircleOutlined iconSize="xl" />
        <Icons.WarningOutlined iconSize="xl" />
        <Icons.ExclamationCircleOutlined iconSize="xl" />
        <Icons.QuestionCircleOutlined iconSize="xl" />
        <Icons.LoadingOutlined iconSize="xl" />
        <Icons.StopOutlined iconSize="xl" />
      </Section>
      <Section title="Navigation">
        <Icons.MenuOutlined iconSize="xl" />
        <Icons.DownOutlined iconSize="xl" />
        <Icons.UpOutlined iconSize="xl" />
        <Icons.RightOutlined iconSize="xl" />
        <Icons.CaretDownOutlined iconSize="xl" />
        <Icons.CaretUpOutlined iconSize="xl" />
        <Icons.ArrowRightOutlined iconSize="xl" />
        <Icons.MoreOutlined iconSize="xl" />
        <Icons.EllipsisOutlined iconSize="xl" />
      </Section>
      <Section title="Objects">
        <Icons.FileOutlined iconSize="xl" />
        <Icons.FileTextOutlined iconSize="xl" />
        <Icons.FileImageOutlined iconSize="xl" />
        <Icons.BookOutlined iconSize="xl" />
        <Icons.TagOutlined iconSize="xl" />
        <Icons.TagsOutlined iconSize="xl" />
        <Icons.StarOutlined iconSize="xl" />
        <Icons.BellOutlined iconSize="xl" />
        <Icons.CalendarOutlined iconSize="xl" />
        <Icons.ClockCircleOutlined iconSize="xl" />
        <Icons.MailOutlined iconSize="xl" />
        <Icons.LinkOutlined iconSize="xl" />
        <Icons.LockOutlined iconSize="xl" />
        <Icons.UnlockOutlined iconSize="xl" />
        <Icons.KeyOutlined iconSize="xl" />
      </Section>
      <Section title="Users">
        <Icons.UserOutlined iconSize="xl" />
        <Icons.UserAddOutlined iconSize="xl" />
        <Icons.UsergroupAddOutlined iconSize="xl" />
        <Icons.LoginOutlined iconSize="xl" />
      </Section>
      <Section title="Settings">
        <Icons.SettingOutlined iconSize="xl" />
        <Icons.BgColorsOutlined iconSize="xl" />
        <Icons.FormatPainterOutlined iconSize="xl" />
        <Icons.HighlightOutlined iconSize="xl" />
        <Icons.EyeOutlined iconSize="xl" />
        <Icons.EyeInvisibleOutlined iconSize="xl" />
        <Icons.SunOutlined iconSize="xl" />
        <Icons.MoonOutlined iconSize="xl" />
      </Section>
    </div>
  );
}
```

## Icon with Text

```tsx live
function IconWithText() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Icons.CheckCircleOutlined iconSize="l" style={{ color: '#52c41a' }} />
        <span>Success message</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Icons.InfoCircleOutlined iconSize="l" style={{ color: '#1890ff' }} />
        <span>Information message</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Icons.WarningOutlined iconSize="l" style={{ color: '#faad14' }} />
        <span>Warning message</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Icons.CloseCircleOutlined iconSize="l" style={{ color: '#ff4d4f' }} />
        <span>Error message</span>
      </div>
    </div>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `iconSize` | `string` | `"xl"` | Size of the icons: s (12px), m (16px), l (20px), xl (24px), xxl (32px). |

## Import

```tsx
import { Icons } from '@superset/components';
```

---

:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Icons/Icons.stories.tsx).
:::