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:

css.gg · CgArrowsExpandDownLeft

Arrows Expand Down Left icon

A free arrows expand down left icon from css.gg, 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 iconangle iconarrow iconcollapse icon
License
MIT license
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/css-gg/arrows-expand-down-left.json
components/icons/css-gg-arrows-expand-down-left.tsx
import * as React from "react";

/**
 * Arrows Expand Down Left from css.gg (https://github.com/astrit/css.gg), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/css-gg/arrows-expand-down-left. Sized in em, colored by currentColor.
 */
export function CgArrowsExpandDownLeftIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M13 5C13 3.89543 13.8954 3 15 3H19C20.1046 3 21 3.89543 21 5V9C21 10.1046 20.1046 11 19 11H15C13.8954 11 13 10.1046 13 9V5ZM15 5H19V9H15V5Z"
        fill="currentColor"
      />
      <path
        d="M5 13H3V21H11V19H6.41424L11.7782 13.6361C12.1687 13.2456 12.1687 12.6124 11.7782 12.2219C11.3876 11.8314 10.7545 11.8314 10.3639 12.2219L5 17.5858V13Z"
        fill="currentColor"
      />
    </svg>
  );
}
With react-icons
import { CgArrowsExpandDownLeft } from "react-icons/cg";

export function Example() {
  return <CgArrowsExpandDownLeft className="size-5" />;
}
arrows-expand-down-left.svg
<svg
  fill="none"
  viewBox="0 0 24 24"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M13 5C13 3.89543 13.8954 3 15 3H19C20.1046 3 21 3.89543 21 5V9C21 10.1046 20.1046 11 19 11H15C13.8954 11 13 10.1046 13 9V5ZM15 5H19V9H15V5Z"
    fill="currentColor"
  />
  <path
    d="M5 13H3V21H11V19H6.41424L11.7782 13.6361C12.1687 13.2456 12.1687 12.6124 11.7782 12.2219C11.3876 11.8314 10.7545 11.8314 10.3639 12.2219L5 17.5858V13Z"
    fill="currentColor"
  />
</svg>
Attribution
"Arrows Expand Down Left" icon from css.gg (https://github.com/astrit/css.gg), licensed under MIT license.

Related icons: chevron, caret, angle, arrow