Skip to content
Cuelark UI

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

Typicons · TiLinkOutline

Link Outline icon

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

License
CC BY-SA 3.0 license
Project
s-ings.com
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/typicons/link-outline.json
components/icons/typicons-link-outline.tsx
import * as React from "react";

/**
 * Link Outline from Typicons (http://s-ings.com/typicons/), CC BY-SA 3.0.
 * Via Cuelark UI: ui.cuelark.com/icons/typicons/link-outline. Sized in em, colored by currentColor.
 */
export function TiLinkOutlineIcon(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="M17.5 5.999c.282 0 .562.106.777.321.431.431.431 1.127 0 1.557l-1.72 1.723.307.308c.585.584.906 1.362.906 2.192s-.321 1.607-.906 2.191l-4.172 4.172c-.584.584-1.361.906-2.191.906s-1.607-.322-2.191-.906l-.31-.309-1.723 1.723c-.215.215-.495.322-.777.322s-.562-.107-.777-.322c-.431-.43-.431-1.126 0-1.557l1.72-1.72-.308-.309c-.583-.584-.905-1.361-.905-2.191s.321-1.608.905-2.192l4.173-4.173c.584-.584 1.387-.875 2.191-.875s1.607.291 2.191.875l.31.308 1.723-1.723c.215-.215.495-.321.777-.321m0-2c-.828 0-1.605.321-2.191.908l-.492.491c-.707-.351-1.504-.539-2.316-.539-1.363 0-2.677.533-3.605 1.461l-4.172 4.173c-.964.962-1.494 2.241-1.494 3.607 0 .822.192 1.616.558 2.327l-.479.48c-.586.585-.909 1.364-.909 2.193 0 .827.322 1.605.908 2.191.584.586 1.363.908 2.191.908s1.605-.322 2.191-.908l.48-.48c.711.365 1.504.559 2.328.559 1.363 0 2.645-.53 3.605-1.492l4.172-4.172c.963-.962 1.492-2.242 1.492-3.605 0-.824-.192-1.617-.558-2.328l.479-.48c.589-.587.912-1.366.912-2.193 0-.828-.322-1.606-.908-2.192-.587-.588-1.364-.909-2.192-.909zM11.4 11.168c.017.535.233 1.036.613 1.416.381.38.881.598 1.416.614l-1.832 1.831c-.017-.534-.234-1.035-.613-1.415-.381-.38-.881-.597-1.416-.614l1.832-1.832m1.1-2.139c-.242 0-.468.094-.637.262l-4.172 4.172c-.168.168-.26.395-.26.637 0 .24.092.467.26.635l.309.308.723-.723c.215-.215.495-.321.777-.321s.562.106.777.321c.431.431.431 1.127 0 1.557l-.72.723.308.308c.168.168.401.253.636.253s.468-.084.637-.253l4.172-4.173c.168-.168.26-.395.26-.635 0-.242-.092-.469-.26-.637l-.31-.309-.723.723c-.215.215-.495.322-.777.322s-.562-.107-.777-.322c-.431-.43-.431-1.126 0-1.557l.72-.72-.307-.309c-.169-.168-.395-.262-.636-.262z"
      />
    </svg>
  );
}
With react-icons
import { TiLinkOutline } from "react-icons/ti";

export function Example() {
  return <TiLinkOutline className="size-5" />;
}
link-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="M17.5 5.999c.282 0 .562.106.777.321.431.431.431 1.127 0 1.557l-1.72 1.723.307.308c.585.584.906 1.362.906 2.192s-.321 1.607-.906 2.191l-4.172 4.172c-.584.584-1.361.906-2.191.906s-1.607-.322-2.191-.906l-.31-.309-1.723 1.723c-.215.215-.495.322-.777.322s-.562-.107-.777-.322c-.431-.43-.431-1.126 0-1.557l1.72-1.72-.308-.309c-.583-.584-.905-1.361-.905-2.191s.321-1.608.905-2.192l4.173-4.173c.584-.584 1.387-.875 2.191-.875s1.607.291 2.191.875l.31.308 1.723-1.723c.215-.215.495-.321.777-.321m0-2c-.828 0-1.605.321-2.191.908l-.492.491c-.707-.351-1.504-.539-2.316-.539-1.363 0-2.677.533-3.605 1.461l-4.172 4.173c-.964.962-1.494 2.241-1.494 3.607 0 .822.192 1.616.558 2.327l-.479.48c-.586.585-.909 1.364-.909 2.193 0 .827.322 1.605.908 2.191.584.586 1.363.908 2.191.908s1.605-.322 2.191-.908l.48-.48c.711.365 1.504.559 2.328.559 1.363 0 2.645-.53 3.605-1.492l4.172-4.172c.963-.962 1.492-2.242 1.492-3.605 0-.824-.192-1.617-.558-2.328l.479-.48c.589-.587.912-1.366.912-2.193 0-.828-.322-1.606-.908-2.192-.587-.588-1.364-.909-2.192-.909zM11.4 11.168c.017.535.233 1.036.613 1.416.381.38.881.598 1.416.614l-1.832 1.831c-.017-.534-.234-1.035-.613-1.415-.381-.38-.881-.597-1.416-.614l1.832-1.832m1.1-2.139c-.242 0-.468.094-.637.262l-4.172 4.172c-.168.168-.26.395-.26.637 0 .24.092.467.26.635l.309.308.723-.723c.215-.215.495-.321.777-.321s.562.106.777.321c.431.431.431 1.127 0 1.557l-.72.723.308.308c.168.168.401.253.636.253s.468-.084.637-.253l4.172-4.173c.168-.168.26-.395.26-.635 0-.242-.092-.469-.26-.637l-.31-.309-.723.723c-.215.215-.495.322-.777.322s-.562-.107-.777-.322c-.431-.43-.431-1.126 0-1.557l.72-.72-.307-.309c-.169-.168-.395-.262-.636-.262z"
  />
</svg>
Attribution
"Link Outline" icon from Typicons (http://s-ings.com/typicons/), licensed under CC BY-SA 3.0 license.

Related icons: url, chain, hyperlink, connect

Link Outline icon in other sets