Skip to content
Cuelark UI

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

Radix Icons · RxDoubleArrowUp

Double Arrow Up icon

A free double arrow up 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/double-arrow-up.json
components/icons/radix-double-arrow-up.tsx
import * as React from "react";

/**
 * Double Arrow Up from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/double-arrow-up. Sized in em, colored by currentColor.
 */
export function RxDoubleArrowUpIcon(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.14669 8.14645C7.34195 7.95118 7.65846 7.95118 7.85372 8.14645L11.8537 12.1464L11.9182 12.2246C12.0463 12.4186 12.0246 12.6826 11.8537 12.8535C11.6829 13.0243 11.4189 13.0461 11.2248 12.9179L11.1467 12.8535L7.50021 9.20699L3.85372 12.8535L3.7756 12.9179C3.58152 13.0461 3.31756 13.0243 3.14669 12.8535C2.97583 12.6826 2.95407 12.4187 3.08224 12.2246L3.14669 12.1464L7.14669 8.14645ZM7.14669 2.14645C7.34195 1.95118 7.65846 1.95118 7.85372 2.14645L11.8537 6.14645L11.9182 6.22457C12.0463 6.41865 12.0246 6.68261 11.8537 6.85348C11.6829 7.02434 11.4189 7.04609 11.2248 6.91793L11.1467 6.85348L7.50021 3.20699L3.85372 6.85348L3.7756 6.91793C3.58152 7.04609 3.31756 7.02434 3.14669 6.85348C2.97583 6.68261 2.95407 6.41865 3.08224 6.22457L3.14669 6.14645L7.14669 2.14645Z"
        fill="currentColor"
      />
    </svg>
  );
}
With react-icons
import { RxDoubleArrowUp } from "react-icons/rx";

export function Example() {
  return <RxDoubleArrowUp className="size-5" />;
}
double-arrow-up.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.14669 8.14645C7.34195 7.95118 7.65846 7.95118 7.85372 8.14645L11.8537 12.1464L11.9182 12.2246C12.0463 12.4186 12.0246 12.6826 11.8537 12.8535C11.6829 13.0243 11.4189 13.0461 11.2248 12.9179L11.1467 12.8535L7.50021 9.20699L3.85372 12.8535L3.7756 12.9179C3.58152 13.0461 3.31756 13.0243 3.14669 12.8535C2.97583 12.6826 2.95407 12.4187 3.08224 12.2246L3.14669 12.1464L7.14669 8.14645ZM7.14669 2.14645C7.34195 1.95118 7.65846 1.95118 7.85372 2.14645L11.8537 6.14645L11.9182 6.22457C12.0463 6.41865 12.0246 6.68261 11.8537 6.85348C11.6829 7.02434 11.4189 7.04609 11.2248 6.91793L11.1467 6.85348L7.50021 3.20699L3.85372 6.85348L3.7756 6.91793C3.58152 7.04609 3.31756 7.02434 3.14669 6.85348C2.97583 6.68261 2.95407 6.41865 3.08224 6.22457L3.14669 6.14645L7.14669 2.14645Z"
    fill="currentColor"
  />
</svg>
Attribution
"Double Arrow Up" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Related icons: direction, pointer, navigate, next