Icons

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

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

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>
  );
}

Result

Loading...

Icon Sizes

Live Editor

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>
  );
}

Result

Loading...

Icon Gallery

Live Editor

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>
  );
}

Result

Loading...

Icon with Text

Live Editor

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>
  );
}

Result

Loading...

Props

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

Import

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

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.