---
title: IconButton
description: A button component that displays an icon in various sizes.
api_name: shop-minis
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/iconbutton'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/iconbutton.md'
---

# Icon​Button

A button component that displays an icon in various sizes.

## Props

* **Icon**

  **LucideIcon**

  **required**

  Lucide icon component to render

* **buttonStyles**

  **string**

  Custom CSS classes for the button container

* **filled**

  **boolean**

  Whether the button is in a filled/active state

* **iconStyles**

  **string**

  Custom CSS classes for the icon

* **onClick**

  **() => void**

  Click handler

* **size**

  **'default' | 'sm' | 'lg'**

  Button size variant

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/shop-minis/IconButton-BILarkue.png)

### Examples

* #### IconButton

  ##### Default

  ```tsx
  import React from 'react'

  import {FavoriteButton} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <div className="flex items-center gap-4">
        <FavoriteButton />
        <FavoriteButton filled />
      </div>
    )
  }
  ```

* #### Default icon button

  ##### Description

  A default icon button

  ##### Default

  ```tsx
  import React from 'react'

  import {FavoriteButton} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <div className="flex items-center gap-4">
        <FavoriteButton />
        <FavoriteButton filled />
      </div>
    )
  }
  ```

* #### Filled icon button

  ##### Description

  An icon button with filled state

  ##### Default

  ```tsx
  import {IconButton} from '@shopify/shop-minis-react'
  import {Heart} from 'lucide-react'

  export default function MyComponent() {
    const handleClick = () => {
      console.log('Icon button clicked')
    }

    return <IconButton Icon={Heart} filled onClick={handleClick} />
  }
  ```

* #### Small icon button

  ##### Description

  A small-sized icon button

  ##### Default

  ```tsx
  import {IconButton} from '@shopify/shop-minis-react'
  import {Star} from 'lucide-react'

  export default function MyComponent() {
    const handleClick = () => {
      console.log('Small icon button clicked')
    }

    return (
      <IconButton
        Icon={Star}
        size="sm"
        onClick={handleClick}
      />
    )
  }
  ```

* #### Large icon button

  ##### Description

  A large-sized icon button

  ##### Default

  ```tsx
  import {IconButton} from '@shopify/shop-minis-react'
  import {Settings} from 'lucide-react'

  export default function MyComponent() {
    const handleClick = () => {
      console.log('Large icon button clicked')
    }

    return <IconButton Icon={Settings} size="lg" onClick={handleClick} />
  }
  ```