Skip to content
Cuelark UI

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

Typicons · TiWarningOutline

Warning Outline icon

A free warning 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 asalert iconcaution iconerror icondanger iconexclamation iconattention 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/warning-outline.json
components/icons/typicons-warning-outline.tsx
import * as React from "react";

/**
 * Warning Outline from Typicons (http://s-ings.com/typicons/), CC BY-SA 3.0.
 * Via Cuelark UI: ui.cuelark.com/icons/typicons/warning-outline. Sized in em, colored by currentColor.
 */
export function TiWarningOutlineIcon(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.511c.561 0 1.119.354 1.544 1.062l5.912 9.854c.851 1.415.194 2.573-1.456 2.573h-12c-1.65 0-2.307-1.159-1.456-2.573l5.912-9.854c.425-.708.983-1.062 1.544-1.062m0-2c-1.296 0-2.482.74-3.259 2.031l-5.912 9.856c-.786 1.309-.872 2.705-.235 3.83s1.879 1.772 3.406 1.772h12c1.527 0 2.77-.646 3.406-1.771s.551-2.521-.235-3.83l-5.912-9.854c-.777-1.294-1.963-2.034-3.259-2.034z"
      />
      <circle cx="12" cy="16" r="1.3" />
      <path
        d="M13.5 10c0-.83-.671-1.5-1.5-1.5s-1.5.67-1.5 1.5c0 .199.041.389.111.562.554 1.376 1.389 3.438 1.389 3.438l1.391-3.438c.068-.173.109-.363.109-.562z"
      />
    </svg>
  );
}
With react-icons
import { TiWarningOutline } from "react-icons/ti";

export function Example() {
  return <TiWarningOutline className="size-5" />;
}
warning-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.511c.561 0 1.119.354 1.544 1.062l5.912 9.854c.851 1.415.194 2.573-1.456 2.573h-12c-1.65 0-2.307-1.159-1.456-2.573l5.912-9.854c.425-.708.983-1.062 1.544-1.062m0-2c-1.296 0-2.482.74-3.259 2.031l-5.912 9.856c-.786 1.309-.872 2.705-.235 3.83s1.879 1.772 3.406 1.772h12c1.527 0 2.77-.646 3.406-1.771s.551-2.521-.235-3.83l-5.912-9.854c-.777-1.294-1.963-2.034-3.259-2.034z"
  />
  <circle cx="12" cy="16" r="1.3" />
  <path
    d="M13.5 10c0-.83-.671-1.5-1.5-1.5s-1.5.67-1.5 1.5c0 .199.041.389.111.562.554 1.376 1.389 3.438 1.389 3.438l1.391-3.438c.068-.173.109-.363.109-.562z"
  />
</svg>
Attribution
"Warning Outline" icon from Typicons (http://s-ings.com/typicons/), licensed under CC BY-SA 3.0 license.

Related icons: alert, caution, error, danger

Warning Outline icon in other sets