Skip to content
Cuelark UI

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

Radix Icons · RxAngle

Angle icon

A free angle 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.

Also known aschevron iconcaret iconarrow iconexpand iconcollapse icon
License
MIT license
Project
icons.radix-ui.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/angle.json
components/icons/radix-angle.tsx
import * as React from "react";

/**
 * Angle from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/angle. Sized in em, colored by currentColor.
 */
export function RxAngleIcon(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="M8.26075 2.23278C8.43141 2.07478 8.69525 2.05291 8.89161 2.19372C9.08772 2.33448 9.15128 2.5909 9.05665 2.80309L9.00587 2.89098L2.47364 12.0004H13.5L13.6006 12.0101C13.8285 12.0567 14 12.2587 14 12.5004C13.9998 12.7419 13.8284 12.9431 13.6006 12.9896L13.5 13.0004H1.50001C1.31254 13.0004 1.14129 12.8947 1.05567 12.7279C0.970155 12.5612 0.984544 12.3606 1.09376 12.2084L8.19337 2.30895L8.26075 2.23278ZM13.4004 10.0004C13.6764 10.0006 13.9004 10.2243 13.9004 10.5004C13.9002 10.7762 13.6763 11.0002 13.4004 11.0004C13.1244 11.0004 12.9006 10.7763 12.9004 10.5004C12.9004 10.2242 13.1243 10.0004 13.4004 10.0004ZM12.5996 8.00036C12.8758 8.00036 13.0996 8.22422 13.0996 8.50036C13.0994 8.77634 12.8756 9.00036 12.5996 9.00036C12.3238 9.00016 12.0998 8.77622 12.0996 8.50036C12.0996 8.22434 12.3236 8.00056 12.5996 8.00036ZM11.5996 6.00036C11.8758 6.00036 12.0996 6.22422 12.0996 6.50036C12.0994 6.77634 11.8756 7.00036 11.5996 7.00036C11.3238 7.00016 11.0998 6.77622 11.0996 6.50036C11.0996 6.22434 11.3236 6.00056 11.5996 6.00036ZM10.4004 4.00036C10.6764 4.00056 10.9004 4.22434 10.9004 4.50036C10.9002 4.77622 10.6763 5.00016 10.4004 5.00036C10.1244 5.00036 9.90059 4.77634 9.9004 4.50036C9.9004 4.22422 10.1243 4.00036 10.4004 4.00036Z"
        fill="currentColor"
      />
    </svg>
  );
}
With react-icons
import { RxAngle } from "react-icons/rx";

export function Example() {
  return <RxAngle className="size-5" />;
}
angle.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="M8.26075 2.23278C8.43141 2.07478 8.69525 2.05291 8.89161 2.19372C9.08772 2.33448 9.15128 2.5909 9.05665 2.80309L9.00587 2.89098L2.47364 12.0004H13.5L13.6006 12.0101C13.8285 12.0567 14 12.2587 14 12.5004C13.9998 12.7419 13.8284 12.9431 13.6006 12.9896L13.5 13.0004H1.50001C1.31254 13.0004 1.14129 12.8947 1.05567 12.7279C0.970155 12.5612 0.984544 12.3606 1.09376 12.2084L8.19337 2.30895L8.26075 2.23278ZM13.4004 10.0004C13.6764 10.0006 13.9004 10.2243 13.9004 10.5004C13.9002 10.7762 13.6763 11.0002 13.4004 11.0004C13.1244 11.0004 12.9006 10.7763 12.9004 10.5004C12.9004 10.2242 13.1243 10.0004 13.4004 10.0004ZM12.5996 8.00036C12.8758 8.00036 13.0996 8.22422 13.0996 8.50036C13.0994 8.77634 12.8756 9.00036 12.5996 9.00036C12.3238 9.00016 12.0998 8.77622 12.0996 8.50036C12.0996 8.22434 12.3236 8.00056 12.5996 8.00036ZM11.5996 6.00036C11.8758 6.00036 12.0996 6.22422 12.0996 6.50036C12.0994 6.77634 11.8756 7.00036 11.5996 7.00036C11.3238 7.00016 11.0998 6.77622 11.0996 6.50036C11.0996 6.22434 11.3236 6.00056 11.5996 6.00036ZM10.4004 4.00036C10.6764 4.00056 10.9004 4.22434 10.9004 4.50036C10.9002 4.77622 10.6763 5.00016 10.4004 5.00036C10.1244 5.00036 9.90059 4.77634 9.9004 4.50036C9.9004 4.22422 10.1243 4.00036 10.4004 4.00036Z"
    fill="currentColor"
  />
</svg>
Attribution
"Angle" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Related icons: chevron, caret, arrow, expand

Angle icon in other sets