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 · TiInfoOutline

Info Outline icon

A free info 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 asinformation iconhelp iconabout icondetails iconquestion iconsupport iconfaq iconlifebuoy 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/info-outline.json
components/icons/typicons-info-outline.tsx
import * as React from "react";

/**
 * Info Outline from Typicons (http://s-ings.com/typicons/), CC BY-SA 3.0.
 * Via Cuelark UI: ui.cuelark.com/icons/typicons/info-outline. Sized in em, colored by currentColor.
 */
export function TiInfoOutlineIcon(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="M12,5.51c0.56,0,1.12,0.35,1.54,1.06l5.91,9.85C20.31,17.84,19.65,19,18,19H6c-1.65,0-2.31-1.16-1.46-2.57l5.91-9.85
	C10.88,5.86,11.44,5.51,12,5.51 M12,3.51c-1.3,0-2.48,0.74-3.26,2.03L2.83,15.4c-0.44,0.74-0.66,1.5-0.66,2.23
	c0,0.56,0.14,1.11,0.42,1.6C3.23,20.35,4.47,21,6,21h12c1.53,0,2.77-0.65,3.41-1.77c0.29-0.51,0.43-1.07,0.42-1.65
	c-0.01-0.71-0.23-1.46-0.66-2.18l-5.91-9.85C14.48,4.25,13.3,3.51,12,3.51z M13.5,16.75c0,0-0.71,0.36-1.07,0.18
	c-0.36-0.18-0.43-0.54-0.23-1.15l0.41-1.22c0.4-1.22-0.12-2.08-1.08-2.13c-1.26-0.07-2.02,0.83-2.02,0.83s0.71-0.36,1.07-0.18
	c0.36,0.18,0.43,0.54,0.23,1.15l-0.41,1.22c-0.4,1.22,0.12,2.07,1.08,2.13C12.74,17.64,13.5,16.75,13.5,16.75z"
      />
      <circle cx="12" cy="10" r="1.3" />
    </svg>
  );
}
With react-icons
import { TiInfoOutline } from "react-icons/ti";

export function Example() {
  return <TiInfoOutline className="size-5" />;
}
info-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="M12,5.51c0.56,0,1.12,0.35,1.54,1.06l5.91,9.85C20.31,17.84,19.65,19,18,19H6c-1.65,0-2.31-1.16-1.46-2.57l5.91-9.85
	C10.88,5.86,11.44,5.51,12,5.51 M12,3.51c-1.3,0-2.48,0.74-3.26,2.03L2.83,15.4c-0.44,0.74-0.66,1.5-0.66,2.23
	c0,0.56,0.14,1.11,0.42,1.6C3.23,20.35,4.47,21,6,21h12c1.53,0,2.77-0.65,3.41-1.77c0.29-0.51,0.43-1.07,0.42-1.65
	c-0.01-0.71-0.23-1.46-0.66-2.18l-5.91-9.85C14.48,4.25,13.3,3.51,12,3.51z M13.5,16.75c0,0-0.71,0.36-1.07,0.18
	c-0.36-0.18-0.43-0.54-0.23-1.15l0.41-1.22c0.4-1.22-0.12-2.08-1.08-2.13c-1.26-0.07-2.02,0.83-2.02,0.83s0.71-0.36,1.07-0.18
	c0.36,0.18,0.43,0.54,0.23,1.15l-0.41,1.22c-0.4,1.22,0.12,2.07,1.08,2.13C12.74,17.64,13.5,16.75,13.5,16.75z"
  />
  <circle cx="12" cy="10" r="1.3" />
</svg>
Attribution
"Info Outline" icon from Typicons (http://s-ings.com/typicons/), licensed under CC BY-SA 3.0 license.

Related icons: information, help, about, details

Info Outline icon in other sets