Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:

Radix Icons · RxButton

Button icon

A free button icon from Radix Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License: MIT license
Project: icons.radix-ui.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/button.json

components/icons/radix-button.tsx

import * as React from "react";

/**
 * Button from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/button. Sized in em, colored by currentColor.
 */
export function RxButtonIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      viewBox="0 0 15 15"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M13.2041 4.01074C14.2128 4.113 15 4.96435 15 6V9L14.9893 9.2041C14.8938 10.1457 14.1457 10.8938 13.2041 10.9893L13 11H2L1.7959 10.9893C0.854346 10.8938 0.1062 10.1457 0.0107422 9.2041L0 9V6C0 4.96435 0.787223 4.113 1.7959 4.01074L2 4H13L13.2041 4.01074ZM2 5C1.48232 5 1.05621 5.39333 1.00488 5.89746L1 6V9C1 9.55228 1.44772 10 2 10H13C13.5523 10 14 9.55228 14 9V6C14 5.48232 13.6067 5.05621 13.1025 5.00488L13 5H2ZM4.5 6.75C4.91421 6.75 5.25 7.08579 5.25 7.5C5.25 7.91421 4.91421 8.25 4.5 8.25C4.08579 8.25 3.75 7.91421 3.75 7.5C3.75 7.08579 4.08579 6.75 4.5 6.75ZM7.5 6.75C7.91421 6.75 8.25 7.08579 8.25 7.5C8.25 7.91421 7.91421 8.25 7.5 8.25C7.08579 8.25 6.75 7.91421 6.75 7.5C6.75 7.08579 7.08579 6.75 7.5 6.75ZM10.5 6.75C10.9142 6.75 11.25 7.08579 11.25 7.5C11.25 7.91421 10.9142 8.25 10.5 8.25C10.0858 8.25 9.75 7.91421 9.75 7.5C9.75 7.08579 10.0858 6.75 10.5 6.75Z"
        fill="currentColor"
      />
    </svg>
  );
}

With react-icons

import { RxButton } from "react-icons/rx";

export function Example() {
  return <RxButton className="size-5" />;
}

button.svg

<svg
  fill="none"
  viewBox="0 0 15 15"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M13.2041 4.01074C14.2128 4.113 15 4.96435 15 6V9L14.9893 9.2041C14.8938 10.1457 14.1457 10.8938 13.2041 10.9893L13 11H2L1.7959 10.9893C0.854346 10.8938 0.1062 10.1457 0.0107422 9.2041L0 9V6C0 4.96435 0.787223 4.113 1.7959 4.01074L2 4H13L13.2041 4.01074ZM2 5C1.48232 5 1.05621 5.39333 1.00488 5.89746L1 6V9C1 9.55228 1.44772 10 2 10H13C13.5523 10 14 9.55228 14 9V6C14 5.48232 13.6067 5.05621 13.1025 5.00488L13 5H2ZM4.5 6.75C4.91421 6.75 5.25 7.08579 5.25 7.5C5.25 7.91421 4.91421 8.25 4.5 8.25C4.08579 8.25 3.75 7.91421 3.75 7.5C3.75 7.08579 4.08579 6.75 4.5 6.75ZM7.5 6.75C7.91421 6.75 8.25 7.08579 8.25 7.5C8.25 7.91421 7.91421 8.25 7.5 8.25C7.08579 8.25 6.75 7.91421 6.75 7.5C6.75 7.08579 7.08579 6.75 7.5 6.75ZM10.5 6.75C10.9142 6.75 11.25 7.08579 11.25 7.5C11.25 7.91421 10.9142 8.25 10.5 8.25C10.0858 8.25 9.75 7.91421 9.75 7.5C9.75 7.08579 10.0858 6.75 10.5 6.75Z"
    fill="currentColor"
  />
</svg>

Attribution

"Button" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Similar Radix Icons icons