iconiq.
iconiq.

Button + Icon

Use any Iconiq icon inside a shadcn Button.

Select an icon below to preview it inside a button. You can then copy the complete example (Button + Icon) or run the CLI command to add the icon to your project.

Preview

Package manager

Code (Button + Icon)

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

// 2. If you don't have the Button component yet:
// npx shadcn 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 add @iconiq/a-arrow-down

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