diff --git a/components/common/SelectItem/index.module.scss b/components/common/SelectItem/index.module.scss
index ce481d8a..d01e8976 100644
--- a/components/common/SelectItem/index.module.scss
+++ b/components/common/SelectItem/index.module.scss
@@ -1,4 +1,4 @@
-.SelectItem {
+.item {
   align-items: center;
   border-radius: $item-corner;
   border: 2px solid transparent;
diff --git a/components/common/SelectItem/index.tsx b/components/common/SelectItem/index.tsx
index 37f85aee..8205283e 100644
--- a/components/common/SelectItem/index.tsx
+++ b/components/common/SelectItem/index.tsx
@@ -6,23 +6,29 @@ import classNames from 'classnames'
 
 interface Props extends ComponentProps<'div'> {
   value: string | number
-  iconSrc?: string
-  altText?: string
+  icon?: {
+    src: string
+    alt: string
+  }
 }
 
 const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
-  { children, value, ...props },
+  { icon, value, children, ...props },
   forwardedRef
 ) {
-  const { altText, iconSrc, ...rest } = props
   return (
     <Select.Item
-      {...rest}
-      className={classNames({ SelectItem: true }, props.className)}
+      {...props}
+      className={classNames(
+        {
+          [styles.item]: true,
+        },
+        props.className
+      )}
       ref={forwardedRef}
       value={`${value}`}
     >
-      {iconSrc ? <img alt={altText} src={iconSrc} /> : ''}
+      {icon ? <img alt={icon.alt} src={icon.src} /> : ''}
       <Select.ItemText>{children}</Select.ItemText>
     </Select.Item>
   )