Skip to content
Cuelark UI

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

Radix Icons · RxArrowDown

Arrow Down icon

A free arrow down 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 asdirection iconpointer iconnavigate iconnext iconmove iconchevron iconcaret iconangle 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/arrow-down.json
components/icons/radix-arrow-down.tsx
import * as React from "react";

/**
 * Arrow Down from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/arrow-down. Sized in em, colored by currentColor.
 */
export function RxArrowDownIcon(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.50021 2C7.77635 2 8.00021 2.22386 8.00021 2.5V11.293L11.1467 8.14648C11.342 7.95122 11.6585 7.95122 11.8537 8.14648C12.049 8.34175 12.049 8.65825 11.8537 8.85352L7.85372 12.8535C7.75995 12.9473 7.63282 13 7.50021 13C7.3676 13 7.24046 12.9473 7.14669 12.8535L3.14669 8.85352L3.08224 8.77539C2.95407 8.58131 2.97583 8.31735 3.14669 8.14648C3.31756 7.97562 3.58152 7.95387 3.7756 8.08203L3.85372 8.14648L7.00021 11.293V2.5C7.00021 2.22386 7.22407 2 7.50021 2Z"
        fill="currentColor"
      />
    </svg>
  );
}
With react-icons
import { RxArrowDown } from "react-icons/rx";

export function Example() {
  return <RxArrowDown className="size-5" />;
}
arrow-down.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.50021 2C7.77635 2 8.00021 2.22386 8.00021 2.5V11.293L11.1467 8.14648C11.342 7.95122 11.6585 7.95122 11.8537 8.14648C12.049 8.34175 12.049 8.65825 11.8537 8.85352L7.85372 12.8535C7.75995 12.9473 7.63282 13 7.50021 13C7.3676 13 7.24046 12.9473 7.14669 12.8535L3.14669 8.85352L3.08224 8.77539C2.95407 8.58131 2.97583 8.31735 3.14669 8.14648C3.31756 7.97562 3.58152 7.95387 3.7756 8.08203L3.85372 8.14648L7.00021 11.293V2.5C7.00021 2.22386 7.22407 2 7.50021 2Z"
    fill="currentColor"
  />
</svg>
Attribution
"Arrow Down" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Related icons: direction, pointer, navigate, next

Arrow Down icon in other sets