iconiq.

Button + Icon

Pick any Iconiq icon, preview it inside a shadcn Button, then copy the complete snippet or run the CLI command.

How to use

  1. 1

    Pick an icon

    Search or browse the icon grid and click to select.

  2. 2

    Configure the button

    Set the button label and choose a variant: default, outline, ghost, and more.

  3. 3

    Copy & install

    Grab the full JSX snippet and run the shadcn CLI command to add the icon.

What you get

  • Live preview

    Hover the button to see the icon animation play in real time before you copy anything.

  • Ready-to-paste JSX

    A complete Button + Icon snippet wired to the shadcn Button component with your chosen variant.

  • One-line install

    shadcn CLI command scoped to your package manager so the icon lands exactly where it belongs.

Works with

Any React project using shadcn — no extra setup needed beyond the Button component and your chosen icon.

Next.jsViteRemixAstroshadcn/ui

Builder

Preview

Package manager

Code (Button + Icon)

text
// 1. Add the icon (run in your project):
// npx shadcn@latest add @iconiq/a-arrow-down

// 2. If you don't have the Button component yet:
// npx shadcn@latest add button

import { Button } from "@/components/ui/button";
import { AArrowDownIcon } from "@/components/ui/a-arrow-down";

export function ExampleButton() {
  return (
    <Button>
      <AArrowDownIcon className="mr-2 size-4" />
      Click me
    </Button>
  );
}

Install via npm / SHADCN CLI

npx shadcn@latest add @iconiq/a-arrow-down

Run this in your project to add the icon. Add the Button component with shadcn@latest add button if you don’t have it yet.