docs/developer_docs/components/ui/icons.mdx - superset - Git at Google

 ---
 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-ui/core/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).
 :::
	---
	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-ui/core/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).
	:::