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:

Typicons · TiArrowMinimiseOutline

Arrow Minimise Outline icon

A free arrow minimise outline icon from Typicons, 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
CC BY-SA 3.0 license
Project
s-ings.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/typicons/arrow-minimise-outline.json
components/icons/typicons-arrow-minimise-outline.tsx
import * as React from "react";

/**
 * Arrow Minimise Outline from Typicons (http://s-ings.com/typicons/), CC BY-SA 3.0.
 * Via Cuelark UI: ui.cuelark.com/icons/typicons/arrow-minimise-outline. Sized in em, colored by currentColor.
 */
export function TiArrowMinimiseOutlineIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      version="1.2"
      baseProfile="tiny"
      viewBox="0 0 24 24"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M22 6c0-.801-.312-1.555-.879-2.121-.566-.567-1.32-.879-2.121-.879s-1.555.312-2.121.879l-.883.883c-.531-.474-1.23-.762-1.996-.762-.919 0-1.732.424-2.283 1.077-.212-.047-.431-.077-.656-.077h-6.061v6.06c0 .255.042.499.102.736-.598.549-.98 1.33-.98 2.204 0 .735.266 1.409.705 1.931l-.947.948c-.568.566-.88 1.32-.88 2.121s.312 1.555.879 2.121c.566.567 1.32.879 2.121.879.539 0 1.334-.152 2.061-.879l.903-.919c.535.495 1.251.798 2.036.798.934 0 1.758-.437 2.309-1.107.241.063.49.107.752.107h5.939v-6.061c0-.226-.029-.444-.077-.656.653-.55 1.077-1.364 1.077-2.283 0-.766-.288-1.465-.762-1.996l.883-.883c.567-.566.879-1.32.879-2.121zm-15 1h4c.553 0 1 .448 1 1s-.447 1-1 1h-2v2c0 .552-.448 1-1 1-.553 0-1-.448-1-1v-4zm12.707-.293l-3.293 3.293h1.586c.553 0 1 .448 1 1s-.448 1-1 1h-5v-5c0-.552.447-1 1-1s1 .448 1 1v1.586l3.293-3.293c.195-.195.451-.293.707-.293s.512.098.707.293c.391.391.391 1.023 0 1.414zm-7.707 11.293c0 .552-.447 1-1 1s-1-.448-1-1v-1.707l-3.354 3.414c-.195.195-.39.293-.646.293s-.512-.098-.707-.293c-.391-.391-.391-1.023 0-1.414l3.293-3.293h-1.465c-.553 0-1-.448-1-1s.447-1 1-1h4.879v5zm0-6h-2.278c.173-.295.278-.634.278-1v-1h1.061c.342 0 .658-.094.939-.245v2.245zm1 1h2.713c-.433.094-.713.33-.713.939v1.061h-.939c-.391 0-.752.117-1.061.311v-2.311zm.061 4c0-.552.447-1 1-1h1.939v-2c0-.552.447-1 1-1s1 .448 1 1v4h-3.939c-.553 0-1-.448-1-1z"
      />
    </svg>
  );
}
With react-icons
import { TiArrowMinimiseOutline } from "react-icons/ti";

export function Example() {
  return <TiArrowMinimiseOutline className="size-5" />;
}
arrow-minimise-outline.svg
<svg
  version="1.2"
  baseProfile="tiny"
  viewBox="0 0 24 24"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M22 6c0-.801-.312-1.555-.879-2.121-.566-.567-1.32-.879-2.121-.879s-1.555.312-2.121.879l-.883.883c-.531-.474-1.23-.762-1.996-.762-.919 0-1.732.424-2.283 1.077-.212-.047-.431-.077-.656-.077h-6.061v6.06c0 .255.042.499.102.736-.598.549-.98 1.33-.98 2.204 0 .735.266 1.409.705 1.931l-.947.948c-.568.566-.88 1.32-.88 2.121s.312 1.555.879 2.121c.566.567 1.32.879 2.121.879.539 0 1.334-.152 2.061-.879l.903-.919c.535.495 1.251.798 2.036.798.934 0 1.758-.437 2.309-1.107.241.063.49.107.752.107h5.939v-6.061c0-.226-.029-.444-.077-.656.653-.55 1.077-1.364 1.077-2.283 0-.766-.288-1.465-.762-1.996l.883-.883c.567-.566.879-1.32.879-2.121zm-15 1h4c.553 0 1 .448 1 1s-.447 1-1 1h-2v2c0 .552-.448 1-1 1-.553 0-1-.448-1-1v-4zm12.707-.293l-3.293 3.293h1.586c.553 0 1 .448 1 1s-.448 1-1 1h-5v-5c0-.552.447-1 1-1s1 .448 1 1v1.586l3.293-3.293c.195-.195.451-.293.707-.293s.512.098.707.293c.391.391.391 1.023 0 1.414zm-7.707 11.293c0 .552-.447 1-1 1s-1-.448-1-1v-1.707l-3.354 3.414c-.195.195-.39.293-.646.293s-.512-.098-.707-.293c-.391-.391-.391-1.023 0-1.414l3.293-3.293h-1.465c-.553 0-1-.448-1-1s.447-1 1-1h4.879v5zm0-6h-2.278c.173-.295.278-.634.278-1v-1h1.061c.342 0 .658-.094.939-.245v2.245zm1 1h2.713c-.433.094-.713.33-.713.939v1.061h-.939c-.391 0-.752.117-1.061.311v-2.311zm.061 4c0-.552.447-1 1-1h1.939v-2c0-.552.447-1 1-1s1 .448 1 1v4h-3.939c-.553 0-1-.448-1-1z"
  />
</svg>
Attribution
"Arrow Minimise Outline" icon from Typicons (http://s-ings.com/typicons/), licensed under CC BY-SA 3.0 license.

Related icons: direction, pointer, navigate, next