diff --git a/content/docs/typography/list.mdx b/content/docs/typography/list.mdx
index 88dd2d226..532099113 100644
--- a/content/docs/typography/list.mdx
+++ b/content/docs/typography/list.mdx
@@ -17,9 +17,15 @@ Use this example to create a default unordered list of items using the `List` co
+## Icons
+
+This example can be used to apply custom icons instead of the default bullets for the list items.
+
+
+
## Nested
-Use this example to nested another list of items inside the parent list element.
+Use this example to nest another list of items inside the parent list element.
diff --git a/examples/list/index.ts b/examples/list/index.ts
index 722aed02f..272fff7c8 100644
--- a/examples/list/index.ts
+++ b/examples/list/index.ts
@@ -1,5 +1,6 @@
export { nested } from './list.nested';
export { ordered } from './list.ordered';
+export { icon } from './list.icon';
export { root } from './list.root';
export { unstyled } from './list.unstyled';
export { horizontal } from './list.horizontal';
diff --git a/examples/list/list.icon.tsx b/examples/list/list.icon.tsx
new file mode 100644
index 000000000..2c2be7296
--- /dev/null
+++ b/examples/list/list.icon.tsx
@@ -0,0 +1,63 @@
+import { type CodeData } from '~/components/code-demo';
+import { List, ListItem } from '~/src';
+import { HiCheckCircle } from 'react-icons/hi';
+
+const code = `
+'use client';
+
+import { List } from 'flowbite-react';
+import { HiCheckCircle } from 'react-icons/hi';
+
+function Component() {
+ return (
+
+ At least 10 characters (and up to 100 characters)
+ At least one lowercase character
+ Inclusion of at least one special character, e.g., ! @ # ?
+
+ );
+}
+`;
+
+const codeRSC = `
+import { List, ListItem } from 'flowbite-react';
+import { HiCheckCircle } from 'react-icons/hi';
+
+function Component() {
+ return (
+
+ At least 10 characters (and up to 100 characters)
+ At least one lowercase character
+ Inclusion of at least one special character, e.g., ! @ # ?
+
+ );
+}
+`;
+
+function Component() {
+ return (
+
+ At least 10 characters (and up to 100 characters)
+ At least one lowercase character
+ Inclusion of at least one special character, e.g., ! @ # ?
+
+ );
+}
+
+export const icon: CodeData = {
+ type: 'single',
+ code: [
+ {
+ fileName: 'client',
+ language: 'tsx',
+ code,
+ },
+ {
+ fileName: 'server',
+ language: 'tsx',
+ code: codeRSC,
+ },
+ ],
+ githubSlug: 'list/list.icon.tsx',
+ component: ,
+};
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 6a05641f1..3c30b03b2 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -1,6 +1,6 @@
import type { ComponentProps, FC, PropsWithChildren } from 'react';
import { twMerge } from 'tailwind-merge';
-import type { FlowbiteStateColors } from '../..';
+import type { FlowbiteListItemTheme, FlowbiteStateColors } from '../..';
import { mergeDeep } from '../../helpers/merge-deep';
import { getTheme } from '../../theme-store';
import type { DeepPartial } from '../../types';
@@ -8,6 +8,7 @@ import { ListItem } from './ListItem';
export interface FlowbiteListTheme {
root: FlowbiteListRootTheme;
+ item: FlowbiteListItemTheme;
}
export interface FlowbiteListRootTheme {
diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
index 407532637..eba65a383 100644
--- a/src/components/List/ListItem.tsx
+++ b/src/components/List/ListItem.tsx
@@ -1,20 +1,30 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { ComponentProps, FC } from 'react';
import { twMerge } from 'tailwind-merge';
import { mergeDeep } from '../../helpers/merge-deep';
import { getTheme } from '../../theme-store';
import type { DeepPartial } from '../../types';
export interface FlowbiteListItemTheme {
- base: string;
+ icon: string;
+ withIcon: {
+ on: string;
+ off: string;
+ };
}
-export interface ListItemProps extends PropsWithChildren {
- theme?: DeepPartial;
+export interface ListItemProps extends ComponentProps<'li'> {
className?: string;
+ icon?: FC>;
+ theme?: DeepPartial;
}
-export const ListItem: FC = ({ children, className, theme: customTheme = {} }) => {
- const theme = mergeDeep(getTheme().listGroup.item, customTheme);
+export const ListItem: FC = ({ children, className, icon: Icon, theme: customTheme = {}, ...props }) => {
+ const theme = mergeDeep(getTheme().list.item, customTheme);
- return {children};
+ return (
+
+ {Icon && }
+ {children}
+
+ );
};
diff --git a/src/components/List/theme.ts b/src/components/List/theme.ts
index 20e243b80..89b00d9d9 100644
--- a/src/components/List/theme.ts
+++ b/src/components/List/theme.ts
@@ -11,4 +11,11 @@ export const listTheme: FlowbiteListTheme = {
unstyled: 'list-none',
nested: 'ps-5 mt-2',
},
+ item: {
+ withIcon: {
+ off: '',
+ on: 'flex items-center',
+ },
+ icon: 'w-3.5 h-3.5 me-2 flex-shrink-0',
+ },
};