Skip to content
Cuelark UI

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

Typicons · TiChartLineOutline

Chart Line Outline icon

A free chart line 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 asgraph iconanalytics iconstatistics iconstats iconreport icondata iconinsights 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/chart-line-outline.json
components/icons/typicons-chart-line-outline.tsx
import * as React from "react";

/**
 * Chart Line Outline from Typicons (http://s-ings.com/typicons/), CC BY-SA 3.0.
 * Via Cuelark UI: ui.cuelark.com/icons/typicons/chart-line-outline. Sized in em, colored by currentColor.
 */
export function TiChartLineOutlineIcon(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="M5.999 17c-.677 0-1.342-.234-1.873-.658-.626-.501-1.019-1.215-1.107-2.011-.089-.796.138-1.58.639-2.206l4-5c.978-1.225 2.883-1.471 4.143-.523l1.674 1.254 2.184-2.729c.571-.716 1.425-1.127 2.342-1.127.679 0 1.343.232 1.873.657.626.501 1.021 1.216 1.108 2.013s-.14 1.58-.641 2.204l-4 5c-.977 1.226-2.882 1.471-4.143.526l-1.674-1.256-2.184 2.729c-.57.716-1.424 1.127-2.341 1.127zm4.001-9c-.306 0-.591.137-.781.374l-4 5.001c-.167.208-.243.471-.213.734.03.266.161.504.369.67.228.183.465.221.624.221.306 0 .591-.137.782-.376l3.395-4.244 3.224 2.42c.42.316 1.056.231 1.381-.176l4-5.001c.167-.208.242-.469.213-.734-.03-.266-.161-.504-.369-.67-.227-.182-.464-.22-.624-.22-.306 0-.591.137-.782.376l-3.395 4.242-3.224-2.417c-.175-.132-.382-.2-.6-.2zM19 21h-14c-.552 0-1-.447-1-1s.448-1 1-1h14c.552 0 1 .447 1 1s-.448 1-1 1z"
      />
    </svg>
  );
}
With react-icons
import { TiChartLineOutline } from "react-icons/ti";

export function Example() {
  return <TiChartLineOutline className="size-5" />;
}
chart-line-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="M5.999 17c-.677 0-1.342-.234-1.873-.658-.626-.501-1.019-1.215-1.107-2.011-.089-.796.138-1.58.639-2.206l4-5c.978-1.225 2.883-1.471 4.143-.523l1.674 1.254 2.184-2.729c.571-.716 1.425-1.127 2.342-1.127.679 0 1.343.232 1.873.657.626.501 1.021 1.216 1.108 2.013s-.14 1.58-.641 2.204l-4 5c-.977 1.226-2.882 1.471-4.143.526l-1.674-1.256-2.184 2.729c-.57.716-1.424 1.127-2.341 1.127zm4.001-9c-.306 0-.591.137-.781.374l-4 5.001c-.167.208-.243.471-.213.734.03.266.161.504.369.67.228.183.465.221.624.221.306 0 .591-.137.782-.376l3.395-4.244 3.224 2.42c.42.316 1.056.231 1.381-.176l4-5.001c.167-.208.242-.469.213-.734-.03-.266-.161-.504-.369-.67-.227-.182-.464-.22-.624-.22-.306 0-.591.137-.782.376l-3.395 4.242-3.224-2.417c-.175-.132-.382-.2-.6-.2zM19 21h-14c-.552 0-1-.447-1-1s.448-1 1-1h14c.552 0 1 .447 1 1s-.448 1-1 1z"
  />
</svg>
Attribution
"Chart Line Outline" icon from Typicons (http://s-ings.com/typicons/), licensed under CC BY-SA 3.0 license.

Related icons: graph, analytics, statistics, stats