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

Radix Icons · RxComponent1

Component1 icon

A free component1 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/component1.json

components/icons/radix-component1.tsx

import * as React from "react";

/**
 * Component1 from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/component1. Sized in em, colored by currentColor.
 */
export function RxComponent1Icon(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="M7.22404 8.60706C7.41808 8.4788 7.68202 8.50072 7.85294 8.67152L10.3285 11.1461C10.5236 11.3413 10.5234 11.6579 10.3285 11.8532L7.85294 14.3287C7.65768 14.5236 7.34106 14.5238 7.14591 14.3287L4.6713 11.8532L4.60685 11.775C4.47882 11.581 4.50049 11.3169 4.6713 11.1461L7.14591 8.67152L7.22404 8.60706ZM5.73185 11.4996L7.49943 13.2672L9.267 11.4996L7.49943 9.73206L5.73185 11.4996ZM3.22404 4.60706C3.41805 4.47887 3.68204 4.50081 3.85294 4.67152L6.32853 7.14613C6.52363 7.34125 6.52335 7.65787 6.32853 7.85316L3.85294 10.3287C3.65766 10.5237 3.34108 10.5239 3.14591 10.3287L0.671301 7.85316L0.606848 7.77601C0.47855 7.58191 0.500384 7.31704 0.671301 7.14613L3.14591 4.67152L3.22404 4.60706ZM11.224 4.60706C11.4181 4.4788 11.682 4.50072 11.8529 4.67152L14.3285 7.14613C14.5236 7.34128 14.5234 7.6579 14.3285 7.85316L11.8529 10.3287C11.6577 10.5236 11.3411 10.5238 11.1459 10.3287L8.6713 7.85316L8.60685 7.77503C8.47882 7.58097 8.50049 7.31693 8.6713 7.14613L11.1459 4.67152L11.224 4.60706ZM1.73185 7.49964L3.49943 9.2682L5.267 7.49964L3.49943 5.73206L1.73185 7.49964ZM9.73185 7.49964L11.4994 9.26722L13.267 7.49964L11.4994 5.73206L9.73185 7.49964ZM7.22404 0.607063C7.41808 0.478798 7.68202 0.50072 7.85294 0.671516L10.3285 3.14613C10.5236 3.34128 10.5234 3.6579 10.3285 3.85316L7.85294 6.32874C7.65768 6.52362 7.34106 6.52379 7.14591 6.32874L4.6713 3.85316L4.60685 3.77503C4.47882 3.58097 4.50049 3.31693 4.6713 3.14613L7.14591 0.671516L7.22404 0.607063ZM5.73185 3.49964L7.49943 5.26722L9.267 3.49964L7.49943 1.73206L5.73185 3.49964Z"
        fill="currentColor"
      />
    </svg>
  );
}

With react-icons

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

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

component1.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="M7.22404 8.60706C7.41808 8.4788 7.68202 8.50072 7.85294 8.67152L10.3285 11.1461C10.5236 11.3413 10.5234 11.6579 10.3285 11.8532L7.85294 14.3287C7.65768 14.5236 7.34106 14.5238 7.14591 14.3287L4.6713 11.8532L4.60685 11.775C4.47882 11.581 4.50049 11.3169 4.6713 11.1461L7.14591 8.67152L7.22404 8.60706ZM5.73185 11.4996L7.49943 13.2672L9.267 11.4996L7.49943 9.73206L5.73185 11.4996ZM3.22404 4.60706C3.41805 4.47887 3.68204 4.50081 3.85294 4.67152L6.32853 7.14613C6.52363 7.34125 6.52335 7.65787 6.32853 7.85316L3.85294 10.3287C3.65766 10.5237 3.34108 10.5239 3.14591 10.3287L0.671301 7.85316L0.606848 7.77601C0.47855 7.58191 0.500384 7.31704 0.671301 7.14613L3.14591 4.67152L3.22404 4.60706ZM11.224 4.60706C11.4181 4.4788 11.682 4.50072 11.8529 4.67152L14.3285 7.14613C14.5236 7.34128 14.5234 7.6579 14.3285 7.85316L11.8529 10.3287C11.6577 10.5236 11.3411 10.5238 11.1459 10.3287L8.6713 7.85316L8.60685 7.77503C8.47882 7.58097 8.50049 7.31693 8.6713 7.14613L11.1459 4.67152L11.224 4.60706ZM1.73185 7.49964L3.49943 9.2682L5.267 7.49964L3.49943 5.73206L1.73185 7.49964ZM9.73185 7.49964L11.4994 9.26722L13.267 7.49964L11.4994 5.73206L9.73185 7.49964ZM7.22404 0.607063C7.41808 0.478798 7.68202 0.50072 7.85294 0.671516L10.3285 3.14613C10.5236 3.34128 10.5234 3.6579 10.3285 3.85316L7.85294 6.32874C7.65768 6.52362 7.34106 6.52379 7.14591 6.32874L4.6713 3.85316L4.60685 3.77503C4.47882 3.58097 4.50049 3.31693 4.6713 3.14613L7.14591 0.671516L7.22404 0.607063ZM5.73185 3.49964L7.49943 5.26722L9.267 3.49964L7.49943 1.73206L5.73185 3.49964Z"
    fill="currentColor"
  />
</svg>

Attribution

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

Similar Radix Icons icons