diff --git a/.changeset/poor-cars-wonder.md b/.changeset/poor-cars-wonder.md
new file mode 100644
index 0000000000..3c3a5d63fd
--- /dev/null
+++ b/.changeset/poor-cars-wonder.md
@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-codemod": minor
+---
+
+Add Banner to iconName transformation target
diff --git a/.changeset/seven-bikes-unite.md b/.changeset/seven-bikes-unite.md
new file mode 100644
index 0000000000..3b7f3e7b81
--- /dev/null
+++ b/.changeset/seven-bikes-unite.md
@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": minor
+---
+
+Allow `iconName` prop of `Button`, `Banner`, `SectionLabel` component to include `BezierIcon` type
\ No newline at end of file
diff --git a/packages/bezier-codemod/src/transforms/icon-name-to-bezier-icon.ts b/packages/bezier-codemod/src/transforms/icon-name-to-bezier-icon.ts
index 0f28e1d2b0..5a308868bb 100644
--- a/packages/bezier-codemod/src/transforms/icon-name-to-bezier-icon.ts
+++ b/packages/bezier-codemod/src/transforms/icon-name-to-bezier-icon.ts
@@ -13,11 +13,9 @@ import {
 type ComponentName = string
 type Attributes = string[]
 
-/**
- * NOTE: add other components or attributes if necessary
- */
-const meta: Array<[ComponentName, Attributes]> = [
+const transformationTargets: Array<[ComponentName, Attributes]> = [
   ['Button', ['leftContent', 'rightContent']],
+  ['Banner', ['icon', 'actionIcon']],
 ]
 
 const regex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
@@ -87,7 +85,7 @@ const changeIconNameToBezierIcon = (sourceFile: SourceFile) => (jsxElement: JsxS
   return false
 }
 
-const iconNameToBezierIcon = (sourceFile: SourceFile) => meta.reduce((acc, [component, attributes]) => {
+const iconNameToBezierIcon = (sourceFile: SourceFile) => transformationTargets.reduce((acc, [component, attributes]) => {
   const components = getComponentsToMigrate(sourceFile)(component)
 
   const migratedComponents = components.reduce((_acc, cur) => {
diff --git a/packages/bezier-react/src/components/Banner/Banner.stories.tsx b/packages/bezier-react/src/components/Banner/Banner.stories.tsx
index 74c7660f78..1c1278e8be 100644
--- a/packages/bezier-react/src/components/Banner/Banner.stories.tsx
+++ b/packages/bezier-react/src/components/Banner/Banner.stories.tsx
@@ -1,5 +1,16 @@
 import React from 'react'
 
+import {
+  BlockIcon,
+  CancelIcon,
+  CancelSmallIcon,
+  ChannelIcon,
+  CheckCircleFilledIcon,
+  ErrorTriangleFilledIcon,
+  Hourglass3Icon,
+  InfoIcon,
+  LightbulbIcon,
+} from '@channel.io/bezier-icons'
 import type {
   Meta,
   Story,
@@ -66,9 +77,9 @@ export const Playground: Story<BannerProps> = props => <Banner {...props} />
 
 Playground.args = {
   variant: BannerVariant.Default,
-  icon: 'lightbulb',
+  icon: LightbulbIcon,
   content: 'Information here.',
-  actionIcon: 'cancel-small',
+  actionIcon: CancelSmallIcon,
   onClickAction: noop,
 }
 
@@ -77,50 +88,50 @@ export const Overview: Story<{}> = () => (
     <StackItem>
       <Banner
         variant={BannerVariant.Default}
-        icon="lightbulb"
+        icon={LightbulbIcon}
         content="Information here."
-        actionIcon="cancel"
+        actionIcon={CancelIcon}
       />
     </StackItem>
     <StackItem>
       <Banner
         variant={BannerVariant.Blue}
-        icon="lightbulb"
+        icon={LightbulbIcon}
         content="Information here."
       />
     </StackItem>
     <StackItem>
       <Banner
         variant={BannerVariant.Cobalt}
-        icon="info"
+        icon={InfoIcon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
     </StackItem>
     <StackItem>
       <Banner
         variant={BannerVariant.Green}
-        icon="check-circle-filled"
+        icon={CheckCircleFilledIcon}
         content="Now Running..."
       />
     </StackItem>
     <StackItem>
       <Banner
         variant={BannerVariant.Orange}
-        icon="error-triangle-filled"
+        icon={ErrorTriangleFilledIcon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
     </StackItem>
     <StackItem>
       <Banner
         variant={BannerVariant.Red}
-        icon="block"
+        icon={BlockIcon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
     </StackItem>
     <StackItem>
       <Banner
         variant={BannerVariant.Alt}
-        icon="hourglass-3"
+        icon={Hourglass3Icon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
     </StackItem>
@@ -132,7 +143,7 @@ export const UsageMinWidth: Story<{}> = () => (
     <StackItem>
       <Banner
         variant={BannerVariant.Orange}
-        icon="error-triangle-filled"
+        icon={ErrorTriangleFilledIcon}
         content="네."
       />
     </StackItem>
@@ -146,21 +157,21 @@ export const UsageFullWidth: Story<{}> = () => (
     <StackItem style={{ width: 360, border: '1px solid red' }}>
       <Banner
         variant={BannerVariant.Orange}
-        icon="error-triangle-filled"
+        icon={ErrorTriangleFilledIcon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
     </StackItem>
     <StackItem style={{ width: 480, border: '1px solid red' }}>
       <Banner
         variant={BannerVariant.Orange}
-        icon="error-triangle-filled"
+        icon={ErrorTriangleFilledIcon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
     </StackItem>
     <StackItem style={{ width: 720, border: '1px solid red' }}>
       <Banner
         variant={BannerVariant.Orange}
-        icon="error-triangle-filled"
+        icon={ErrorTriangleFilledIcon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
     </StackItem>
@@ -174,7 +185,7 @@ export const UsageMaxWidth: Story<{}> = () => (
     <StackItem>
       <Banner
         variant={BannerVariant.Cobalt}
-        icon="info"
+        icon={InfoIcon}
         // eslint-disable-next-line max-len
         content={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis laoreet felis. Fusce sit amet blandit sem. Aliquam erat volutpat. Pellentesque tempor arcu non scelerisque rutrum. Proin placerat imperdiet gravida. In efficitur augue ut maximus placerat. Quisque vitae pellentesque urna. Sed sagittis enim quis laoreet dictum. Morbi fringilla, justo sit amet dapibus bibendum, nisl nisl suscipit dolor, eget venenatis urna velit in dolor.\n\nNunc accumsan ligula sit amet interdum accumsan. Etiam gravida est risus, in interdum elit egestas ut. Aliquam sit amet lorem malesuada, commodo tortor eu, semper dui. Integer ultricies porta ex sed tincidunt. Sed accumsan orci eu arcu facilisis congue ac hendrerit lacus. Etiam erat velit, interdum auctor cursus at, interdum vel augue. Integer gravida, nibh vel lacinia blandit, ex quam dapibus lectus, at sollicitudin lorem purus vel nulla. Suspendisse ac tellus eget risus condimentum facilisis sed vitae turpis. Fusce fringilla commodo aliquam. Quisque eget justo purus. Suspendisse ut lobortis turpis, vitae fermentum augue. Donec viverra, orci ut lobortis euismod, est nibh iaculis metus, sit amet mattis ex elit eget tellus.'}
       />
@@ -189,7 +200,7 @@ export const UsageConsecutive: Story<{}> = () => (
     <StackItem>
       <Banner
         variant={BannerVariant.Cobalt}
-        icon="info"
+        icon={InfoIcon}
         content="전화번호 설정하는 게 좋아요."
         hasLink
         linkText="설정하기"
@@ -198,18 +209,18 @@ export const UsageConsecutive: Story<{}> = () => (
     <StackItem>
       <Banner
         variant={BannerVariant.Orange}
-        icon="error-triangle-filled"
+        icon={ErrorTriangleFilledIcon}
         content="빠진 내용을 모두 입력해주세요."
       />
     </StackItem>
     <StackItem>
       <Banner
         variant={BannerVariant.Default}
-        icon="info"
+        icon={InfoIcon}
         content="아래 내용을 입력해주세요."
         hasLink
         linkText="사용안내"
-        actionIcon="cancel"
+        actionIcon={CancelIcon}
       />
     </StackItem>
   </VStack>
@@ -232,11 +243,11 @@ UsageNoIcon.storyName = 'Usage (no icon)'
 export const UsageLink: Story<{}> = () => (
   <Banner
     variant={BannerVariant.Default}
-    icon="info"
+    icon={InfoIcon}
     content="아래 내용을 입력해주세요."
     hasLink
     linkText="사용안내"
-    actionIcon="cancel"
+    actionIcon={CancelIcon}
   />
 )
 
@@ -245,12 +256,12 @@ UsageLink.storyName = 'Usage (link)'
 export const UsageLinkTo: Story<{}> = () => (
   <Banner
     variant={BannerVariant.Cobalt}
-    icon="channel"
+    icon={ChannelIcon}
     content="채널톡 정말 좋은 서비스에요."
     hasLink
     linkText="사용안내"
     linkTo="https://channel.io"
-    actionIcon="cancel"
+    actionIcon={CancelIcon}
   />
 )
 
diff --git a/packages/bezier-react/src/components/Banner/Banner.styled.ts b/packages/bezier-react/src/components/Banner/Banner.styled.ts
index f731f9eb4e..57de471ffe 100644
--- a/packages/bezier-react/src/components/Banner/Banner.styled.ts
+++ b/packages/bezier-react/src/components/Banner/Banner.styled.ts
@@ -2,6 +2,7 @@ import { styled } from '~/src/foundation'
 
 import type { VariantProps } from '~/src/types/ComponentProps'
 
+import { Icon } from '~/src/components/Icon'
 import { LegacyIcon } from '~/src/components/LegacyIcon'
 import {
   StackItem as BaseStackItem,
@@ -18,7 +19,8 @@ import type { BannerVariant } from './Banner.types'
 
 type BannerVariantProps = Required<VariantProps<BannerVariant>>
 
-const BannerIcon = styled(LegacyIcon)``
+const BannerIcon = styled(Icon)``
+const BannerLegacyIcon = styled(LegacyIcon)``
 
 const ContentWrapper = styled.div<BannerVariantProps>`
   color: ${({ foundation, variant }) => foundation?.theme?.[TEXT_COLORS[variant]]};
@@ -51,6 +53,7 @@ const StackItem = styled(BaseStackItem)`
 
 export default {
   BannerIcon,
+  BannerLegacyIcon,
   ContentWrapper,
   Link,
   Stack,
diff --git a/packages/bezier-react/src/components/Banner/Banner.test.tsx b/packages/bezier-react/src/components/Banner/Banner.test.tsx
index ff5de4f630..2c133a0930 100644
--- a/packages/bezier-react/src/components/Banner/Banner.test.tsx
+++ b/packages/bezier-react/src/components/Banner/Banner.test.tsx
@@ -1,5 +1,9 @@
 import React from 'react'
 
+import {
+  AllIcon,
+  InfoIcon,
+} from '@channel.io/bezier-icons'
 import { fireEvent } from '@testing-library/react'
 
 import { render } from '~/src/utils/testUtils'
@@ -15,7 +19,7 @@ describe('Banner >', () => {
 
   beforeEach(() => {
     props = {
-      icon: 'info',
+      icon: InfoIcon,
       content: 'Lorem ipsum dolor amet.',
       hasLink: false,
     }
@@ -40,7 +44,7 @@ describe('Banner >', () => {
 
   it('renders action button if actionIcon is correct value', () => {
     const onClickAction = jest.fn()
-    const { getByRole } = renderBanner({ actionIcon: 'all', onClickAction })
+    const { getByRole } = renderBanner({ actionIcon: AllIcon, onClickAction })
     const actionButton = getByRole('button')
 
     fireEvent.click(actionButton)
diff --git a/packages/bezier-react/src/components/Banner/Banner.tsx b/packages/bezier-react/src/components/Banner/Banner.tsx
index 28a1de0688..561d876c6c 100644
--- a/packages/bezier-react/src/components/Banner/Banner.tsx
+++ b/packages/bezier-react/src/components/Banner/Banner.tsx
@@ -1,7 +1,10 @@
 import React, { forwardRef } from 'react'
 
+import { isBezierIcon } from '@channel.io/bezier-icons'
+
 import { Typography } from '~/src/foundation'
 
+import { warn } from '~/src/utils/assertUtils'
 import {
   isNil,
   isString,
@@ -13,6 +16,7 @@ import {
   ButtonStyleVariant,
 } from '~/src/components/Button'
 import { IconSize } from '~/src/components/Icon'
+import { isIconName } from '~/src/components/LegacyIcon'
 import { StackItem } from '~/src/components/Stack'
 import { Text } from '~/src/components/Text'
 
@@ -85,6 +89,10 @@ export const Banner = forwardRef(function Banner(
     testId = BANNER_TEST_ID,
   } = props
 
+  if (isIconName(icon)) {
+    warn('Deprecation: IconName as a value for the icon property of Banner has been deprecated. Use the Icon of bezier-icons instead.')
+  }
+
   return (
     <Styled.Stack
       ref={forwardedRef}
@@ -97,11 +105,19 @@ export const Banner = forwardRef(function Banner(
     >
       { !isNil(icon) && (
         <Styled.StackItem>
-          <Styled.BannerIcon
-            name={icon}
-            color={iconColor ?? DEFAULT_ICON_COLORS[variant]}
-            size={IconSize.S}
-          />
+          { isBezierIcon(icon) ? (
+            <Styled.BannerIcon
+              source={icon}
+              color={iconColor ?? DEFAULT_ICON_COLORS[variant]}
+              size={IconSize.S}
+            />
+          ) : (
+            <Styled.BannerLegacyIcon
+              name={icon}
+              color={iconColor ?? DEFAULT_ICON_COLORS[variant]}
+              size={IconSize.S}
+            />
+          ) }
         </Styled.StackItem>
       ) }
 
diff --git a/packages/bezier-react/src/components/Banner/Banner.types.ts b/packages/bezier-react/src/components/Banner/Banner.types.ts
index adac00677d..05f970157c 100644
--- a/packages/bezier-react/src/components/Banner/Banner.types.ts
+++ b/packages/bezier-react/src/components/Banner/Banner.types.ts
@@ -1,6 +1,9 @@
 import type { ReactNode } from 'react'
 
-import { type IconName } from '@channel.io/bezier-icons'
+import {
+  type BezierIcon,
+  type IconName,
+} from '@channel.io/bezier-icons'
 
 import type {
   AdditionalColorProps,
@@ -32,7 +35,7 @@ interface BannerOptions {
    *
    * If `null` is given, no icon will be displayed.
    */
-  icon: IconName | null
+  icon: BezierIcon | IconName | null
 
   /**
    * Whether to display link at the end of banner content.
@@ -72,10 +75,8 @@ interface BannerOptions {
 
   /**
    * Specifies which icon button to display at the top right of the banner.
-   *
-   * FIXME(@ed): 새로운 아이콘 방식으로 변경
    */
-  actionIcon?: IconName
+  actionIcon?: BezierIcon | IconName
 
   /**
    * Handler to be executed when the action icon button is clicked.
diff --git a/packages/bezier-react/src/components/Button/Button.mdx b/packages/bezier-react/src/components/Button/Button.mdx
index bc19e135a4..80a9b124c0 100644
--- a/packages/bezier-react/src/components/Button/Button.mdx
+++ b/packages/bezier-react/src/components/Button/Button.mdx
@@ -1,6 +1,10 @@
 import {
   useState,
 } from 'react'
+import {
+  PlayIcon,
+  TriangleDownIcon,
+} from '@channel.io/bezier-icons'
 import {
   ArgsTable,
   Canvas,
@@ -107,7 +111,7 @@ ButtonGroup에 대해 더 알아보려면 [스토리](/docs/components-buttongro
 
 ### Recipe: Button with various contents
 
-- 기본적으로 `leftContent`, `rightContent` prop에 icon name에 해당하는 string을 지정하여 좌우측에 아이콘이 들어가는 형태를 표현합니다.
+- 기본적으로 `leftContent`, `rightContent` prop에 `BezierIcon`을 지정하여 좌우측에 아이콘이 들어가는 형태를 표현합니다.
 
 <Canvas>
   <Story id="components-button--usage-various-contents-composite" />
@@ -140,7 +144,7 @@ const AsyncActionButton = () => {
   }
   return (
     <Button
-      leftContent="play"
+      leftContent={PlayIcon}
       text="Click Me!"
       colorVariant={ButtonColorVariant.Cobalt}
       styleVariant={ButtonStyleVariant.Primary}
@@ -169,7 +173,7 @@ const OpenDropdownButton = () => {
     <div>
       <Button
         text="Select"
-        rightContent="triangle-down"
+        rightContent={TriangleDownIcon}
         active={isOpen}
         colorVariant={ButtonColorVariant.MonochromeLight}
         styleVariant={ButtonStyleVariant.Tertiary}
diff --git a/packages/bezier-react/src/components/Button/Button.stories.tsx b/packages/bezier-react/src/components/Button/Button.stories.tsx
index 7e313f97a5..01ef64dc95 100644
--- a/packages/bezier-react/src/components/Button/Button.stories.tsx
+++ b/packages/bezier-react/src/components/Button/Button.stories.tsx
@@ -1,6 +1,24 @@
 import React, { useState } from 'react'
 
-import { TagIcon } from '@channel.io/bezier-icons'
+import {
+  ArrowRightIcon,
+  CalendarIcon,
+  CancelIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  EditIcon,
+  HeartFilledIcon,
+  LightningIcon,
+  OpenInNewIcon,
+  PeopleIcon,
+  PlayIcon,
+  PlusIcon,
+  TagIcon,
+  TrashIcon,
+  TriangleDownIcon,
+  VideocamIcon,
+} from '@channel.io/bezier-icons'
 import {
   type Meta,
   type Story,
@@ -85,8 +103,8 @@ Playground.args = {
   disabled: false,
   active: false,
   loading: false,
-  leftContent: 'plus',
-  rightContent: 'arrow-right',
+  leftContent: PlusIcon,
+  rightContent: ArrowRightIcon,
   size: ButtonSize.M,
   styleVariant: ButtonStyleVariant.Primary,
   colorVariant: ButtonColorVariant.Blue,
@@ -114,7 +132,7 @@ export const OverviewCTA: Story<{}> = () => (
     </StackItem>
     <StackItem>
       <Button
-        leftContent="open-in-new"
+        leftContent={OpenInNewIcon}
         text="Open link"
         colorVariant={ButtonColorVariant.Blue}
         styleVariant={ButtonStyleVariant.Secondary}
@@ -122,7 +140,7 @@ export const OverviewCTA: Story<{}> = () => (
     </StackItem>
     <StackItem>
       <Button
-        leftContent="check"
+        leftContent={CheckIcon}
         text="Publish"
         colorVariant={ButtonColorVariant.Green}
         styleVariant={ButtonStyleVariant.Primary}
@@ -137,7 +155,7 @@ export const OverviewFloating: Story<{}> = () => (
   <HStack justify="center">
     <StackItem>
       <Button
-        leftContent="chevron-down"
+        leftContent={ChevronDownIcon}
         text="New messages"
         colorVariant={ButtonColorVariant.Cobalt}
         styleVariant={ButtonStyleVariant.Floating}
@@ -156,7 +174,7 @@ export const UsageCTA: Story<{}> = () => (
       styleVariant={ButtonStyleVariant.Secondary}
     />
     <Button
-      leftContent="play"
+      leftContent={PlayIcon}
       text="퍼블리시"
       colorVariant={ButtonColorVariant.Green}
       styleVariant={ButtonStyleVariant.Primary}
@@ -180,13 +198,13 @@ export const UsageCTA2: Story<{}> = () => (
       styleVariant={ButtonStyleVariant.Secondary}
     />
     <Button
-      leftContent="play"
+      leftContent={PlayIcon}
       text="퍼블리시"
       colorVariant={ButtonColorVariant.Green}
       styleVariant={ButtonStyleVariant.Primary}
     />
     <Button
-      leftContent="cancel"
+      leftContent={CancelIcon}
       colorVariant={ButtonColorVariant.MonochromeLight}
       styleVariant={ButtonStyleVariant.Tertiary}
     />
@@ -199,22 +217,22 @@ export const UsageWebLinks: Story<{}> = () => (
   <HStack justify="center" spacing={6}>
     <StackItem>
       <Button
-        leftContent="open-in-new"
+        leftContent={OpenInNewIcon}
         text="See guide"
-        rightContent="arrow-right"
+        rightContent={ArrowRightIcon}
         styleVariant={ButtonStyleVariant.Tertiary}
       />
     </StackItem>
     <StackItem>
       <Button
         text="See guide"
-        rightContent="arrow-right"
+        rightContent={ArrowRightIcon}
         styleVariant={ButtonStyleVariant.Tertiary}
       />
     </StackItem>
     <StackItem>
       <Button
-        leftContent="open-in-new"
+        leftContent={OpenInNewIcon}
         text="See guide"
         styleVariant={ButtonStyleVariant.Tertiary}
       />
@@ -238,12 +256,12 @@ export const UsageComposite: Story<{}> = () => (
         <VStack align="stretch">
           <StackItem>
             <SectionLabel
-              leftContent={{ icon: 'people' }}
+              leftContent={{ icon: PeopleIcon }}
               content="태그 ∙ 2"
               rightContent={(
                 <Button
                   size={ButtonSize.XS}
-                  leftContent="chevron-down"
+                  leftContent={ChevronDownIcon}
                   styleVariant={ButtonStyleVariant.Tertiary}
                   colorVariant={ButtonColorVariant.MonochromeLight}
                 />
@@ -259,7 +277,7 @@ export const UsageComposite: Story<{}> = () => (
                   <StackItem>
                     <Button
                       size={ButtonSize.XS}
-                      leftContent="edit"
+                      leftContent={EditIcon}
                       styleVariant={ButtonStyleVariant.Tertiary}
                       colorVariant={ButtonColorVariant.MonochromeLight}
                     />
@@ -267,7 +285,7 @@ export const UsageComposite: Story<{}> = () => (
                   <StackItem>
                     <Button
                       size={ButtonSize.XS}
-                      leftContent="cancel"
+                      leftContent={CancelIcon}
                       styleVariant={ButtonStyleVariant.Tertiary}
                       colorVariant={ButtonColorVariant.MonochromeLight}
                     />
@@ -285,7 +303,7 @@ export const UsageComposite: Story<{}> = () => (
                   <StackItem>
                     <Button
                       size={ButtonSize.XS}
-                      leftContent="edit"
+                      leftContent={EditIcon}
                       styleVariant={ButtonStyleVariant.Tertiary}
                       colorVariant={ButtonColorVariant.MonochromeLight}
                     />
@@ -293,7 +311,7 @@ export const UsageComposite: Story<{}> = () => (
                   <StackItem>
                     <Button
                       size={ButtonSize.XS}
-                      leftContent="cancel"
+                      leftContent={CancelIcon}
                       styleVariant={ButtonStyleVariant.Tertiary}
                       colorVariant={ButtonColorVariant.MonochromeLight}
                     />
@@ -314,9 +332,9 @@ export const UsageVariousContentsComposite: Story<{}> = () => (
   <HStack justify="center">
     <StackItem>
       <Button
-        leftContent="play"
+        leftContent={PlayIcon}
         text="퍼블리시"
-        rightContent="arrow-right"
+        rightContent={ArrowRightIcon}
         colorVariant={ButtonColorVariant.Green}
       />
     </StackItem>
@@ -329,7 +347,7 @@ export const UsageVariousContentsIconOnly: Story<{}> = () => (
   <HStack justify="center">
     <StackItem>
       <Button
-        leftContent="plus"
+        leftContent={PlusIcon}
         colorVariant={ButtonColorVariant.MonochromeLight}
         styleVariant={ButtonStyleVariant.Secondary}
       />
@@ -385,7 +403,7 @@ const AsyncActionButton = () => {
   }
   return (
     <Button
-      leftContent="play"
+      leftContent={PlayIcon}
       text="Click Me!"
       colorVariant={ButtonColorVariant.Cobalt}
       styleVariant={ButtonStyleVariant.Primary}
@@ -422,7 +440,7 @@ const OpenDropdownButton = () => {
       <Button
         ref={setTarget}
         text="Select"
-        rightContent="triangle-down"
+        rightContent={TriangleDownIcon}
         active={isOpen}
         colorVariant={ButtonColorVariant.MonochromeLight}
         styleVariant={ButtonStyleVariant.Tertiary}
@@ -462,7 +480,7 @@ export const VariantsColor: Story<{}> = () => (
           <Text typo={Typography.Size13}>Blue</Text>
         </StackItem>
         <StackItem>
-          <Button leftContent="plus" text="Invite" colorVariant={ButtonColorVariant.Blue} />
+          <Button leftContent={PlusIcon} text="Invite" colorVariant={ButtonColorVariant.Blue} />
         </StackItem>
       </HStack>
     </StackItem>
@@ -472,7 +490,7 @@ export const VariantsColor: Story<{}> = () => (
           <Text typo={Typography.Size13}>Red</Text>
         </StackItem>
         <StackItem>
-          <Button leftContent="trash" text="Remove" colorVariant={ButtonColorVariant.Red} />
+          <Button leftContent={TrashIcon} text="Remove" colorVariant={ButtonColorVariant.Red} />
         </StackItem>
       </HStack>
     </StackItem>
@@ -482,7 +500,7 @@ export const VariantsColor: Story<{}> = () => (
           <Text typo={Typography.Size13}>Green</Text>
         </StackItem>
         <StackItem>
-          <Button leftContent="play" text="Publish" colorVariant={ButtonColorVariant.Green} />
+          <Button leftContent={PlayIcon} text="Publish" colorVariant={ButtonColorVariant.Green} />
         </StackItem>
       </HStack>
     </StackItem>
@@ -492,7 +510,7 @@ export const VariantsColor: Story<{}> = () => (
           <Text typo={Typography.Size13}>Cobalt</Text>
         </StackItem>
         <StackItem>
-          <Button leftContent="videocam" text="Join" colorVariant={ButtonColorVariant.Cobalt} />
+          <Button leftContent={VideocamIcon} text="Join" colorVariant={ButtonColorVariant.Cobalt} />
         </StackItem>
       </HStack>
     </StackItem>
@@ -502,7 +520,7 @@ export const VariantsColor: Story<{}> = () => (
           <Text typo={Typography.Size13}>Orange</Text>
         </StackItem>
         <StackItem>
-          <Button leftContent="heart-filled" text="Warn" colorVariant={ButtonColorVariant.Orange} />
+          <Button leftContent={HeartFilledIcon} text="Warn" colorVariant={ButtonColorVariant.Orange} />
         </StackItem>
       </HStack>
     </StackItem>
@@ -512,7 +530,7 @@ export const VariantsColor: Story<{}> = () => (
           <Text typo={Typography.Size13}>Pink</Text>
         </StackItem>
         <StackItem>
-          <Button leftContent="videocam" text="Pink" colorVariant={ButtonColorVariant.Pink} />
+          <Button leftContent={VideocamIcon} text="Pink" colorVariant={ButtonColorVariant.Pink} />
         </StackItem>
       </HStack>
     </StackItem>
@@ -522,7 +540,7 @@ export const VariantsColor: Story<{}> = () => (
           <Text typo={Typography.Size13}>Purple</Text>
         </StackItem>
         <StackItem>
-          <Button leftContent="videocam" text="Purple" colorVariant={ButtonColorVariant.Purple} />
+          <Button leftContent={VideocamIcon} text="Purple" colorVariant={ButtonColorVariant.Purple} />
         </StackItem>
       </HStack>
     </StackItem>
@@ -532,7 +550,7 @@ export const VariantsColor: Story<{}> = () => (
           <Text typo={Typography.Size13}>Monochrome Dark</Text>
         </StackItem>
         <StackItem>
-          <Button leftContent="lightning" text="Dark" colorVariant={ButtonColorVariant.MonochromeDark} />
+          <Button leftContent={LightningIcon} text="Dark" colorVariant={ButtonColorVariant.MonochromeDark} />
         </StackItem>
       </HStack>
     </StackItem>
@@ -542,7 +560,7 @@ export const VariantsColor: Story<{}> = () => (
           <Text typo={Typography.Size13}>Monochrome Light</Text>
         </StackItem>
         <StackItem>
-          <Button leftContent="lightning" text="Light alpha" colorVariant={ButtonColorVariant.MonochromeLight} />
+          <Button leftContent={LightningIcon} text="Light alpha" colorVariant={ButtonColorVariant.MonochromeLight} />
         </StackItem>
       </HStack>
     </StackItem>
@@ -562,8 +580,8 @@ export const VariantsStyle: Story<{}> = () => (
             </StackItem>
             <StackItem>
               <Button
-                leftContent="plus"
-                rightContent="chevron-right"
+                leftContent={PlusIcon}
+                rightContent={ChevronRightIcon}
                 text="Invite"
                 colorVariant={ButtonColorVariant.Blue}
                 styleVariant={styleVariant}
@@ -588,8 +606,8 @@ export const VariantsSize: Story<{}> = () => (
             </StackItem>
             <StackItem>
               <Button
-                leftContent="calendar"
-                rightContent="triangle-down"
+                leftContent={CalendarIcon}
+                rightContent={TriangleDownIcon}
                 text="Join"
                 size={size}
                 colorVariant={ButtonColorVariant.Blue}
diff --git a/packages/bezier-react/src/components/Button/Button.tsx b/packages/bezier-react/src/components/Button/Button.tsx
index b215911b91..3aa03aca9e 100644
--- a/packages/bezier-react/src/components/Button/Button.tsx
+++ b/packages/bezier-react/src/components/Button/Button.tsx
@@ -5,16 +5,22 @@ import React, {
   useState,
 } from 'react'
 
+import { isBezierIcon } from '@channel.io/bezier-icons'
+
 import {
   type SemanticNames,
   Typography,
 } from '~/src/foundation'
 
 import { flattenDeep } from '~/src/utils/arrayUtils'
+import { warn } from '~/src/utils/assertUtils'
 import { noop } from '~/src/utils/functionUtils'
 import { isArray } from '~/src/utils/typeUtils'
 
-import { IconSize } from '~/src/components/Icon'
+import {
+  Icon,
+  IconSize,
+} from '~/src/components/Icon'
 import {
   LegacyIcon,
   isIconName,
@@ -222,6 +228,7 @@ export const Button = forwardRef(function Button(
 
   const renderSideContent = useCallback((content?: SideContent) => {
     if (isIconName(content)) {
+      warn('Deprecation: IconName as a value for the leftContent property of a Button has been deprecated. Use the Icon of bezier-icons instead.')
       return (
         <LegacyIcon
           name={content}
@@ -231,6 +238,16 @@ export const Button = forwardRef(function Button(
       )
     }
 
+    if (isBezierIcon(content)) {
+      return (
+        <Icon
+          source={content}
+          size={iconSize}
+          color={overridedIconAndSpinnerColor}
+        />
+      )
+    }
+
     return content
   }, [
     iconSize,
diff --git a/packages/bezier-react/src/components/Button/Button.types.ts b/packages/bezier-react/src/components/Button/Button.types.ts
index 4249908f66..68ef03139c 100644
--- a/packages/bezier-react/src/components/Button/Button.types.ts
+++ b/packages/bezier-react/src/components/Button/Button.types.ts
@@ -1,4 +1,4 @@
-import { type IconName } from '@channel.io/bezier-icons'
+import { type BezierIcon } from '@channel.io/bezier-icons'
 
 import {
   type BezierComponentProps,
@@ -39,7 +39,7 @@ export enum ButtonSize {
   XL = 'XL',
 }
 
-export type SideContent = IconName | React.ReactNode
+export type SideContent = React.ReactNode | BezierIcon
 
 export type MouseEventHandler = React.MouseEventHandler<HTMLButtonElement>
 type FocusEventHandler = React.FocusEventHandler<HTMLButtonElement>
diff --git a/packages/bezier-react/src/components/Icon/Icon.mdx b/packages/bezier-react/src/components/Icon/Icon.mdx
index fe9062580e..12c14759ae 100644
--- a/packages/bezier-react/src/components/Icon/Icon.mdx
+++ b/packages/bezier-react/src/components/Icon/Icon.mdx
@@ -85,22 +85,19 @@ Semantic 색상을 `color` prop에 지정하여 아이콘이 어떤 색상으로
 ### Composite usage
 
 `bezier-react`의 많은 컴포넌트는 아이콘을 포함하고 있습니다.
-어떤 아이콘을 지정할지 커스터마이징할 수 있다면, 보통 `IconName` type을 가지는 prop을 통해 지정하게 됩니다.
+어떤 아이콘을 지정할지 커스터마이징할 수 있다면, 보통 `BezierIcon` type을 가지는 prop을 통해 지정하게 됩니다.
 
 이에 대한 예시로는 `Button` 컴포넌트가 있습니다.
-`Button`의 `leftContent`, `rightContent` prop에 icon name을 지정하면, 원하는 아이콘을 버튼에 표시할 수 있습니다.
+`Button`의 `leftContent`, `rightContent` prop에 `BezierIcon` 을 지정하면, 원하는 아이콘을 버튼에 표시할 수 있습니다.
 
 ```tsx
 <Button
-  leftContent="plus"
+  leftContent={PlusIcon}
   text="Add content"
-  rightContent="arrow-right"
+  rightContent={ArrowRightIcon}
 />
 ```
 
-> 💡 현재 composite component가 아이콘을 사용하는 방식으로는 tree-shaking 효과를 얻기가 어렵습니다.
-> Icon name을 prop으로 전달하는 방법은 다른 패턴으로 개선되어야 합니다.
-
 ### How to add new icons to `bezier-react`
 
 디자이너가 새로운 아이콘을 추가하거나, 기존의 아이콘을 변경한 경우 아이콘 리소스를 변경하여 배포가 이루어져야 합니다.
diff --git a/packages/bezier-react/src/components/KeyValueListItem/KeyValueListItem.stories.tsx b/packages/bezier-react/src/components/KeyValueListItem/KeyValueListItem.stories.tsx
index 46478629f6..84e271a463 100644
--- a/packages/bezier-react/src/components/KeyValueListItem/KeyValueListItem.stories.tsx
+++ b/packages/bezier-react/src/components/KeyValueListItem/KeyValueListItem.stories.tsx
@@ -4,6 +4,7 @@ import React from 'react'
 import {
   BadgeIcon,
   EditIcon,
+  PlayIcon,
 } from '@channel.io/bezier-icons'
 import {
   type Meta,
@@ -62,7 +63,7 @@ const SingleLineTemplate: Story<KeyValueListItemStorybookProps> = ({ containerWi
     <KeyValueListItem {...otherProps} onClickKey={onClickKey} onClickValue={onClickValue} />
     <KeyValueListItem {...otherProps}>
       <Button
-        leftContent="play"
+        leftContent={PlayIcon}
         text="높이 테스트"
         colorVariant={ButtonColorVariant.Green}
         styleVariant={ButtonStyleVariant.Primary}
diff --git a/packages/bezier-react/src/components/ListMenuTitle/ListMenuTitle.stories.tsx b/packages/bezier-react/src/components/ListMenuTitle/ListMenuTitle.stories.tsx
index 15cfd844dc..0a67b79f0a 100644
--- a/packages/bezier-react/src/components/ListMenuTitle/ListMenuTitle.stories.tsx
+++ b/packages/bezier-react/src/components/ListMenuTitle/ListMenuTitle.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { SendForwardIcon } from '@channel.io/bezier-icons'
 import {
   type Meta,
   type Story,
@@ -8,8 +9,10 @@ import base from 'paths.macro'
 
 import { getTitle } from '~/src/utils/storyUtils'
 
-import { IconSize } from '~/src/components/Icon'
-import { LegacyIcon } from '~/src/components/LegacyIcon'
+import {
+  Icon,
+  IconSize,
+} from '~/src/components/Icon'
 
 import ListMenuTitle from './ListMenuTitle'
 import type ListMenuTitleProps from './ListMenuTitle.types'
@@ -19,7 +22,7 @@ export default {
 } as Meta
 
 const Template: Story<ListMenuTitleProps> = ({
-  rightAction = (<div><LegacyIcon name="send-forward" size={IconSize.XS} /></div>),
+  rightAction = (<div><Icon source={SendForwardIcon} size={IconSize.XS} /></div>),
   ...otherListItemProps
 }) => (
   <div style={{ width: 240 }}>
diff --git a/packages/bezier-react/src/components/Modals/Modal/Modal.styled.ts b/packages/bezier-react/src/components/Modals/Modal/Modal.styled.ts
index a7c9bc46b9..513f0436e7 100644
--- a/packages/bezier-react/src/components/Modals/Modal/Modal.styled.ts
+++ b/packages/bezier-react/src/components/Modals/Modal/Modal.styled.ts
@@ -1,3 +1,4 @@
+import { CancelIcon } from '@channel.io/bezier-icons'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 
 import {
@@ -152,7 +153,7 @@ const CLOSE_ICON_BUTTON_MARGIN_Y = -6
 
 export const CloseIconButton = styled(Button).attrs({
   size: CLOSE_ICON_BUTTON_SIZE,
-  leftContent: 'cancel',
+  leftContent: CancelIcon,
   colorVariant: ButtonColorVariant.MonochromeDark,
   styleVariant: ButtonStyleVariant.Tertiary,
 })`
diff --git a/packages/bezier-react/src/components/SectionLabel/SectionLabel.stories.tsx b/packages/bezier-react/src/components/SectionLabel/SectionLabel.stories.tsx
index fa86d76a05..5d91d9a923 100644
--- a/packages/bezier-react/src/components/SectionLabel/SectionLabel.stories.tsx
+++ b/packages/bezier-react/src/components/SectionLabel/SectionLabel.stories.tsx
@@ -1,6 +1,11 @@
 import React, { useState } from 'react'
 
 import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  PlusCircleFilledIcon,
+  PlusCircleIcon,
   StarFilledIcon,
   ViewIcon,
 } from '@channel.io/bezier-icons'
@@ -64,7 +69,7 @@ const Template: Story<SectionLabelProps & {
       />
       <SectionLabel
         rightContent={{
-          icon: 'plus-circle',
+          icon: PlusCircleIcon,
           iconColor: 'bgtxt-teal-normal',
           onClick: noop,
         }}
@@ -77,12 +82,12 @@ const Template: Story<SectionLabelProps & {
         {...otherSectionLabelProps}
       />
       <SectionLabel
-        leftContent={{ icon: 'star-filled' }}
+        leftContent={{ icon: StarFilledIcon }}
         {...otherSectionLabelProps}
       />
       <SectionLabel
         leftContent={{
-          icon: 'star-filled',
+          icon: StarFilledIcon,
           iconColor: 'bgtxt-yellow-normal',
           onClick: noop,
         }}
@@ -95,22 +100,22 @@ const Template: Story<SectionLabelProps & {
         {...otherSectionLabelProps}
       />
       <SectionLabel
-        leftContent={{ icon: 'star-filled' }}
+        leftContent={{ icon: StarFilledIcon }}
         {...otherSectionLabelProps}
         content="Teams • 3141592653589794626"
       />
       <SectionLabel
-        leftContent={{ icon: 'star-filled' }}
+        leftContent={{ icon: StarFilledIcon }}
         rightContent={[
           testNumberLabel,
-          { icon: 'plus-circle-filled', onClick: noop },
-          { icon: 'chevron-up', iconColor: 'txt-black-darkest', onClick: noop },
+          { icon: PlusCircleFilledIcon, onClick: noop },
+          { icon: ChevronUpIcon, iconColor: 'txt-black-darkest', onClick: noop },
         ]}
         {...otherSectionLabelProps}
         content="Teams • 3141592653589794626"
       />
       <SectionLabel
-        rightContent={{ icon: open ? 'chevron-down' : 'chevron-right' }}
+        rightContent={{ icon: open ? ChevronDownIcon : ChevronRightIcon }}
         {...otherSectionLabelProps}
         open={open}
         onClick={toggle}
@@ -128,11 +133,11 @@ const Template: Story<SectionLabelProps & {
       </SectionLabel>
       <SectionLabel
         help="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-        rightContent={{ icon: open ? 'chevron-down' : 'chevron-right' }}
+        rightContent={{ icon: open ? ChevronDownIcon : ChevronRightIcon }}
         {...otherSectionLabelProps}
       />
       <SectionLabel
-        rightContent={{ icon: open ? 'chevron-down' : 'chevron-right' }}
+        rightContent={{ icon: open ? ChevronDownIcon : ChevronRightIcon }}
         wrapperInterpolation={testWrapperInterpolation}
         {...otherSectionLabelProps}
       />
diff --git a/packages/bezier-react/src/components/SectionLabel/SectionLabel.styled.ts b/packages/bezier-react/src/components/SectionLabel/SectionLabel.styled.ts
index e72fe5daf5..6339c68a67 100644
--- a/packages/bezier-react/src/components/SectionLabel/SectionLabel.styled.ts
+++ b/packages/bezier-react/src/components/SectionLabel/SectionLabel.styled.ts
@@ -5,6 +5,7 @@ import {
 
 import { type InterpolationProps } from '~/src/types/Foundation'
 
+import { Icon } from '~/src/components/Icon'
 import { LegacyIcon } from '~/src/components/LegacyIcon'
 import { Text } from '~/src/components/Text'
 
@@ -14,7 +15,11 @@ const clickableElementStyle = css`
   }
 `
 
-const LeftIcon = styled(LegacyIcon)`
+const LeftIcon = styled(Icon)`
+  ${clickableElementStyle}
+`
+
+const LegacyLeftIcon = styled(LegacyIcon)`
   ${clickableElementStyle}
 `
 
@@ -82,6 +87,7 @@ const Wrapper = styled.div<InterpolationProps>`
 export default {
   LeftIcon,
   LeftContentWrapper,
+  LegacyLeftIcon,
   ContentText,
   ContentWrapper,
   HelpContainer,
diff --git a/packages/bezier-react/src/components/SectionLabel/SectionLabel.test.tsx b/packages/bezier-react/src/components/SectionLabel/SectionLabel.test.tsx
index 6c51c70b80..1840b0a6e9 100644
--- a/packages/bezier-react/src/components/SectionLabel/SectionLabel.test.tsx
+++ b/packages/bezier-react/src/components/SectionLabel/SectionLabel.test.tsx
@@ -1,5 +1,10 @@
 import React from 'react'
 
+import {
+  TagIcon,
+  ToolIcon,
+} from '@channel.io/bezier-icons'
+
 import { LightFoundation } from '~/src/foundation'
 
 import { render } from '~/src/utils/testUtils'
@@ -56,7 +61,7 @@ describe('SectionLabel', () => {
   })
 
   it('renders left content with specified icon and default icon color', () => {
-    const { getByTestId } = renderComponent({ leftContent: { icon: 'tag' } })
+    const { getByTestId } = renderComponent({ leftContent: { icon: TagIcon } })
     const leftContent = getByTestId(SECTION_LABEL_TEST_LEFT_CONTENT_ID)
 
     const leftIcon = leftContent.children.item(0)
@@ -66,7 +71,7 @@ describe('SectionLabel', () => {
   })
 
   it('renders left content with specified icon and icon color', () => {
-    const { getByTestId } = renderComponent({ leftContent: { icon: 'tag', iconColor: 'bgtxt-orange-normal' } })
+    const { getByTestId } = renderComponent({ leftContent: { icon: TagIcon, iconColor: 'bgtxt-orange-normal' } })
     const leftContent = getByTestId(SECTION_LABEL_TEST_LEFT_CONTENT_ID)
 
     const leftIcon = leftContent.children.item(0)
@@ -102,7 +107,7 @@ describe('SectionLabel', () => {
   })
 
   it('renders right content as button if only icon is specified', () => {
-    const { getByTestId } = renderComponent({ rightContent: { icon: 'tag' } })
+    const { getByTestId } = renderComponent({ rightContent: { icon: TagIcon } })
     const rightContent = getByTestId(SECTION_LABEL_TEST_RIGHT_CONTENT_ID)
 
     expect(rightContent.children.length).toBe(1)
@@ -116,8 +121,8 @@ describe('SectionLabel', () => {
   it('renders multiple right contents, and item with iconColor is not rendered as button', () => {
     const { getByTestId } = renderComponent({
       rightContent: [
-        { icon: 'tag' },
-        { icon: 'tool', iconColor: 'bgtxt-green-normal' },
+        { icon: TagIcon },
+        { icon: ToolIcon, iconColor: 'bgtxt-green-normal' },
       ],
     })
     const rightContent = getByTestId(SECTION_LABEL_TEST_RIGHT_CONTENT_ID)
diff --git a/packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx b/packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx
index da43649c0f..1ad45c9c1c 100644
--- a/packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx
+++ b/packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx
@@ -4,11 +4,13 @@ import React, {
   useMemo,
 } from 'react'
 
+import { isBezierIcon } from '@channel.io/bezier-icons'
 import classNames from 'classnames'
 import { v4 as uuid } from 'uuid'
 
 import { Typography } from '~/src/foundation'
 
+import { warn } from '~/src/utils/assertUtils'
 import {
   isArray,
   isEmpty,
@@ -25,8 +27,14 @@ import {
 } from '~/src/components/Button'
 import { Divider } from '~/src/components/Divider'
 import { Help } from '~/src/components/Help'
-import { IconSize } from '~/src/components/Icon'
-import { LegacyIcon } from '~/src/components/LegacyIcon'
+import {
+  Icon,
+  IconSize,
+} from '~/src/components/Icon'
+import {
+  LegacyIcon,
+  isIconName,
+} from '~/src/components/LegacyIcon'
 
 import { type SectionLabelItemProps } from './SectionLabel.types'
 import type SectionLabelProps from './SectionLabel.types'
@@ -48,6 +56,9 @@ function renderSectionLabelActionItem(props: SectionLabelItemProps, key?: string
   }
 
   const { icon, iconColor, onClick } = props
+  if (isIconName(icon)) {
+    warn('Deprecation: IconName as a value for the icon property of SectionLabel has been deprecated. Use the Icon of bezier-icons instead.')
+  }
 
   if (!isNil(iconColor)) {
     /*
@@ -60,11 +71,13 @@ function renderSectionLabelActionItem(props: SectionLabelItemProps, key?: string
         className={clickableClassName(onClick)}
         onClick={onClick}
       >
-        <LegacyIcon
-          name={icon}
-          size={IconSize.XS}
-          color={iconColor}
-        />
+        { isBezierIcon(icon) ? (
+          <Icon
+            source={icon}
+            size={IconSize.XS}
+            color={iconColor}
+          />
+        ) : <LegacyIcon name={icon} size={IconSize.XS} color={iconColor} /> }
       </Styled.RightItemWrapper>
     )
   }
@@ -119,18 +132,34 @@ const SectionLabel = forwardRef<HTMLDivElement, SectionLabelProps>(function Sect
     contentWrapperInterpolation,
   ])
 
-  const renderLeftItem = useCallback((item: SectionLabelItemProps) => (
-    'icon' in item
-      ? (
-        <Styled.LeftIcon
+  const renderLeftItem = useCallback((item: SectionLabelItemProps) => {
+    if ('icon' in item) {
+      if (isBezierIcon(item.icon)) {
+        return (
+          <Styled.LeftIcon
+            className={clickableClassName(item.onClick)}
+            source={item.icon}
+            size={IconSize.S}
+            color={item.iconColor ?? 'txt-black-dark'}
+            onClick={item.onClick}
+          />
+        )
+      }
+
+      return (
+        <Styled.LegacyLeftIcon
           className={clickableClassName(item.onClick)}
           name={item.icon}
           size={IconSize.S}
           color={item.iconColor ?? 'txt-black-dark'}
           onClick={item.onClick}
         />
-      ) : item
-  ), [])
+      )
+    }
+
+    return item
+  },
+  [])
 
   const leftComponent = useMemo(() => {
     if (isNil(leftContent)) {
diff --git a/packages/bezier-react/src/components/SectionLabel/SectionLabel.types.ts b/packages/bezier-react/src/components/SectionLabel/SectionLabel.types.ts
index b0dbf1676d..a622654632 100644
--- a/packages/bezier-react/src/components/SectionLabel/SectionLabel.types.ts
+++ b/packages/bezier-react/src/components/SectionLabel/SectionLabel.types.ts
@@ -1,6 +1,9 @@
 import type React from 'react'
 
-import { type IconName } from '@channel.io/bezier-icons'
+import {
+  type BezierIcon,
+  type IconName,
+} from '@channel.io/bezier-icons'
 
 import type {
   AdditionalColorProps,
@@ -12,7 +15,7 @@ import type {
 } from '~/src/types/ComponentProps'
 
 interface IconInfo extends AdditionalColorProps<'icon'> {
-  icon: IconName
+  icon: IconName | BezierIcon
 }
 
 export type SectionLabelItemProps = (IconInfo & {
diff --git a/packages/bezier-react/src/stories/ComponentConvention/PropsInterface.stories.mdx b/packages/bezier-react/src/stories/ComponentConvention/PropsInterface.stories.mdx
index 218e1ac194..ab85fcbf59 100644
--- a/packages/bezier-react/src/stories/ComponentConvention/PropsInterface.stories.mdx
+++ b/packages/bezier-react/src/stories/ComponentConvention/PropsInterface.stories.mdx
@@ -1,4 +1,15 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { 
+  ArrowRightUpIcon,
+  BookmarkFilledIcon,
+  ChannelSmileFilledIcon,
+  EmailFilledIcon,
+  LinkIcon,
+  PersonIcon,
+  SearchIcon,
+  TagIcon,
+  UserNameIcon,
+} from '@channel.io/bezier-icons'
 import { css, Themes, Typography } from '~/src/foundation'
 import { Badge, Tag, TagBadgeVariant } from '~/src/components/TagBadge'
 import { Banner, BannerVariant } from '~/src/components/Banner'
@@ -7,7 +18,7 @@ import { SegmentedControl } from '~/src/components/Forms/SegmentedControl'
 import { Select } from '~/src/components/Forms/Inputs/Select'
 import { TextField } from '~/src/components/Forms/Inputs/TextField'
 import { KeyValueListItem } from '~/src/components/KeyValueListItem'
-import { Icon, ChannelSmileFilledIcon, UserNameIcon } from '~/src/components/Icon'
+import { Icon } from '~/src/components/Icon'
 import { ListItem, ListItemSize } from '~/src/components/ListItem'
 import { OutlineItem } from '~/src/components/OutlineItem'
 import { SectionLabel } from '~/src/components/SectionLabel'
@@ -122,12 +133,12 @@ StylableComponentProps를 구현하는 컴포넌트는 외부에서 스타일을
 
 ### ContentProps - `content`
 
-`content` prop은 일반적으로 `ReactNode` 타입을 가지지만, 컴포넌트에 따라 `string`, `IconName` 타입을 강제하는 등 컴포넌트에 필요한 제한조건을 가할 수 있습니다.
+`content` prop은 일반적으로 `ReactNode` 타입을 가지지만, 컴포넌트에 따라 `string`, `BezierIcon` 타입을 강제하는 등 컴포넌트에 필요한 제한조건을 가할 수 있습니다.
 
 <Canvas>
   <Story name="ContentProps:SectionLabelProps.content">
     <SectionLabel
-      leftContent={{ icon: 'email-filled' }}
+      leftContent={{ icon: EmailFilledIcon }}
       content="수신함"
     />
   </Story>
@@ -184,23 +195,23 @@ StylableComponentProps를 구현하는 컴포넌트는 외부에서 스타일을
 content가 들어가는 영역 좌, 우로 별개의 content를 위한 공간이 필요한 경우, 컴포넌트는 `SideContentProps` 인터페이스를 구현합니다.
 
 `leftContent`, `rightContent` prop은 일반적으로 `ReactNode` 타입을 가지지만, 컴포넌트 특성에 따라 특정 타입을 가지도록 제한할 수 있습니다.
-~~가장 많이 사용되는 usecase로는 `leftContent` 또는 `rightContent` 타입을 `IconName`으로 지정하고, 이것을 `Icon` 컴포넌트로 렌더링하는 것입니다.~~
+가장 많이 사용되는 usecase로는 `leftContent` 또는 `rightContent` 타입을 `BezierIcon`으로 지정하고, 이것을 `Icon` 컴포넌트로 렌더링하는 것입니다.
 또는, content와 양쪽 side content 영역을 구분하여 content에만 ellipsis가 적용되는 스펙을 구현하고자 할 때 사용할 수 있습니다.
 
 <Canvas>
   <Story name="SideContentProps:ButtonProps.leftContent">
-    <Button text="검색" leftContent="search" />
+    <Button text="검색" leftContent={SearchIcon} />
   </Story>
   <Story name="SideContentProps:ButtonProps.rightContent">
-    <Button text="가이드 확인하기" rightContent="arrow-right-up" styleVariant={ButtonStyleVariant.Tertiary} />
+    <Button text="가이드 확인하기" rightContent={ArrowRightUpIcon} styleVariant={ButtonStyleVariant.Tertiary} />
   </Story>
   <Story name="SideContentProps:SelectProps.leftContent">
-    <Select leftContent="bookmark-filled" placeholder="작품 선택" />
+    <Select leftContent={BookmarkFilledIcon} placeholder="작품 선택" />
   </Story>
   <Story name="SideContentProps:SelectProps.rightContent">
     <div style={{ width: '150px' }}>
       <SectionLabel
-        leftContent={{ icon: 'person' }}
+        leftContent={{ icon: PersonIcon }}
         content="김수한무거북이와두루미"
         rightContent={<Text bold typo={Typography.Size13} color="txt-black-dark">님</Text>}
       />
@@ -291,7 +302,7 @@ export enum BannerVariant {
   <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridGap: '8px' }}>
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <Button
-        leftContent="search"
+        leftContent={SearchIcon}
         text="Primary + Blue"
         colorVariant={ButtonColorVariant.Blue}
         styleVariant={ButtonStyleVariant.Primary}
@@ -299,7 +310,7 @@ export enum BannerVariant {
     </div>
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <Button
-        leftContent="search"
+        leftContent={SearchIcon}
         text="Primary + Red"
         colorVariant={ButtonColorVariant.Red}
         styleVariant={ButtonStyleVariant.Primary}
@@ -307,7 +318,7 @@ export enum BannerVariant {
     </div>
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <Button
-        leftContent="search"
+        leftContent={SearchIcon}
         text="Primary + Green"
         colorVariant={ButtonColorVariant.Green}
         styleVariant={ButtonStyleVariant.Primary}
@@ -315,7 +326,7 @@ export enum BannerVariant {
     </div>
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <Button
-        leftContent="search"
+        leftContent={SearchIcon}
         text="Secondary + Blue"
         colorVariant={ButtonColorVariant.Blue}
         styleVariant={ButtonStyleVariant.Secondary}
@@ -323,7 +334,7 @@ export enum BannerVariant {
     </div>
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <Button
-        leftContent="search"
+        leftContent={SearchIcon}
         text="Secondary + Red"
         colorVariant={ButtonColorVariant.Red}
         styleVariant={ButtonStyleVariant.Secondary}
@@ -331,7 +342,7 @@ export enum BannerVariant {
     </div>
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <Button
-        leftContent="search"
+        leftContent={SearchIcon}
         text="Secondary + Green"
         colorVariant={ButtonColorVariant.Green}
         styleVariant={ButtonStyleVariant.Secondary}
@@ -339,7 +350,7 @@ export enum BannerVariant {
     </div>
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <Button
-        leftContent="search"
+        leftContent={SearchIcon}
         text="Tertiary + Blue"
         colorVariant={ButtonColorVariant.Blue}
         styleVariant={ButtonStyleVariant.Tertiary}
@@ -347,7 +358,7 @@ export enum BannerVariant {
     </div>
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <Button
-        leftContent="search"
+        leftContent={SearchIcon}
         text="Tertiary + Red"
         colorVariant={ButtonColorVariant.Red}
         styleVariant={ButtonStyleVariant.Tertiary}
@@ -355,7 +366,7 @@ export enum BannerVariant {
     </div>
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <Button
-        leftContent="search"
+        leftContent={SearchIcon}
         text="Tertiary + Green"
         colorVariant={ButtonColorVariant.Green}
         styleVariant={ButtonStyleVariant.Tertiary}
@@ -363,7 +374,7 @@ export enum BannerVariant {
     </div>
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <Button
-        leftContent="search"
+        leftContent={SearchIcon}
         text="Floating + Blue"
         colorVariant={ButtonColorVariant.Blue}
         styleVariant={ButtonStyleVariant.Floating}
@@ -371,7 +382,7 @@ export enum BannerVariant {
     </div>
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <Button
-        leftContent="search"
+        leftContent={SearchIcon}
         text="Floating + Red"
         colorVariant={ButtonColorVariant.Red}
         styleVariant={ButtonStyleVariant.Floating}
@@ -379,7 +390,7 @@ export enum BannerVariant {
     </div>
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <Button
-        leftContent="search"
+        leftContent={SearchIcon}
         text="Floating + Green"
         colorVariant={ButtonColorVariant.Green}
         styleVariant={ButtonStyleVariant.Floating}
@@ -449,10 +460,10 @@ export enum BannerVariant {
 
 <Canvas>
   <Story name="ActivatableProps:ButtonProps:inactive">
-    <Button styleVariant={ButtonStyleVariant.Tertiary} leftContent="link" />
+    <Button styleVariant={ButtonStyleVariant.Tertiary} leftContent={LinkIcon} />
   </Story>
   <Story name="ActivatableProps:ButtonProps:active">
-    <Button active styleVariant={ButtonStyleVariant.Tertiary} leftContent="link" />
+    <Button active styleVariant={ButtonStyleVariant.Tertiary} leftContent={LinkIcon} />
   </Story>
 </Canvas>
 
@@ -509,12 +520,12 @@ Form 내에서 사용되는 필드가 구현할 수 있는 인터페이스입니
 
 <Canvas>
   <Story name="FormComponentProps:SelectProps.idle">
-    <Select placeholder="태그를 선택하세요" leftContent="tag" />
+    <Select placeholder="태그를 선택하세요" leftContent={TagIcon} />
   </Story>
   <Story name="FormComponentProps:SelectProps.disabled">
-    <Select placeholder="태그를 선택하세요" leftContent="tag" disabled />
+    <Select placeholder="태그를 선택하세요" leftContent={TagIcon} disabled />
   </Story>
   <Story name="FormComponentProps:SelectProps.readOnly">
-    <Select placeholder="태그를 선택하세요" leftContent="tag" readOnly />
+    <Select placeholder="태그를 선택하세요" leftContent={TagIcon} readOnly />
   </Story>
 </Canvas>
diff --git a/packages/bezier-react/src/stories/ComponentConvention/Stories.stories.mdx b/packages/bezier-react/src/stories/ComponentConvention/Stories.stories.mdx
index 22e17fd27d..0ff20944af 100644
--- a/packages/bezier-react/src/stories/ComponentConvention/Stories.stories.mdx
+++ b/packages/bezier-react/src/stories/ComponentConvention/Stories.stories.mdx
@@ -1,4 +1,13 @@
 import { Canvas, Story, Meta } from '@storybook/addon-docs'
+import { 
+  ArrowRightUpIcon, 
+  CommentIcon,
+  EditIcon,
+  FaceSmileAddIcon, 
+  LinkIcon, 
+  MoreVerticalIcon, 
+  SplitRightIcon, 
+} from '@channel.io/bezier-icons'
 import { Button, ButtonColorVariant, ButtonStyleVariant } from '~/src/components/Button'
 import { Tooltip } from '~/src/components/Tooltip'
 import { css } from '~/src/foundation'
@@ -67,10 +76,10 @@ bezier-react를 사용하는 사람들은 스토리북을 통해 다음과 같
     <Button text="Cancel" styleVariant={ButtonStyleVariant.Secondary} colorVariant={ButtonColorVariant.Red} />
   </Story>
   <Story name="Button:Overview.CopyLink">
-    <Button text="Copy Link" leftContent="link" styleVariant={ButtonStyleVariant.Tertiary} colorVariant={ButtonColorVariant.MonochromeLight} />
+    <Button text="Copy Link" leftContent={LinkIcon} styleVariant={ButtonStyleVariant.Tertiary} colorVariant={ButtonColorVariant.MonochromeLight} />
   </Story>
   <Story name="Button:Overview.Jump">
-    <Button text="Jump" leftContent="arrow-right-up" styleVariant={ButtonStyleVariant.Floating} />
+    <Button text="Jump" leftContent={ArrowRightUpIcon} styleVariant={ButtonStyleVariant.Floating} />
   </Story>
 </Canvas>
 ```
@@ -92,10 +101,10 @@ bezier-react를 사용하는 사람들은 스토리북을 통해 다음과 같
     <Button text="Cancel" styleVariant={ButtonStyleVariant.Secondary} colorVariant={ButtonColorVariant.Red} />
   </Story>
   <Story name="Button:Overview.CopyLink">
-    <Button text="Copy Link" leftContent="link" styleVariant={ButtonStyleVariant.Tertiary} colorVariant={ButtonColorVariant.MonochromeLight} />
+    <Button text="Copy Link" leftContent={LinkIcon} styleVariant={ButtonStyleVariant.Tertiary} colorVariant={ButtonColorVariant.MonochromeLight} />
   </Story>
   <Story name="Button:Overview.Jump">
-    <Button text="Jump" leftContent="arrow-right-up" styleVariant={ButtonStyleVariant.Floating} />
+    <Button text="Jump" leftContent={ArrowRightUpIcon} styleVariant={ButtonStyleVariant.Floating} />
   </Story>
 </Canvas>
 
@@ -122,11 +131,11 @@ CTA를 명확하게 유도할 수 있도록 Primary 버튼은 그룹 안에서 1
     `} />
   </Story>
   <Story name="Button:ButtonGroup.Actions">
-    <Button leftContent="face-smile-add" colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
-    <Button leftContent="comment" colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
-    <Button leftContent="edit" colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
-    <Button leftContent="more-vertical" colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
-    <Button active leftContent="split-right" colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
+    <Button leftContent={FaceSmileAddIcon} colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
+    <Button leftContent={CommentIcon} colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
+    <Button leftContent={EditIcon} colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
+    <Button leftContent={MoreVerticalIcon} colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
+    <Button active leftContent={SplitRightIcon} colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
   </Story>
 </Canvas>
 ```
@@ -147,11 +156,11 @@ CTA를 명확하게 유도할 수 있도록 Primary 버튼은 그룹 안에서 1
     `} />
   </Story>
   <Story name="Button:ButtonGroup.Actions">
-    <Button leftContent="face-smile-add" colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
-    <Button leftContent="comment" colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
-    <Button leftContent="edit" colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
-    <Button leftContent="more-vertical" colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
-    <Button active leftContent="split-right" colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
+    <Button leftContent={FaceSmileAddIcon} colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
+    <Button leftContent={CommentIcon} colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
+    <Button leftContent={EditIcon} colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
+    <Button leftContent={MoreVerticalIcon} colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
+    <Button active leftContent={SplitRightIcon} colorVariant={ButtonColorVariant.MonochromeDark} styleVariant={ButtonStyleVariant.Tertiary} />
   </Story>
 </Canvas>