Triangle Down icon

Use the Triangle Down icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { TriangleDown24Regular, TriangleDown24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TriangleDown24Regular aria-label="Triangle Down" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_triangle_down_24_regular.svg" width="24" height="24" alt="Triangle Down">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.30159 6.36946C1.44124 4.86947 2.52413 3 4.25334 3H19.7424C21.4716 3 22.5545 4.86948 21.6941 6.36947L13.9496 19.8717C13.085 21.3791 10.9107 21.3791 10.0461 19.8717L2.30159 6.36946ZM4.25334 4.5C3.67693 4.5 3.31597 5.12316 3.60276 5.62315L11.3473 19.1254C11.6355 19.6278 12.3602 19.6278 12.6484 19.1254L20.3929 5.62316C20.6797 5.12316 20.3188 4.5 19.7424 4.5H4.25334Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/triangle_down_24_regular.svg";

Details

Keywords

triangleshapearrowusedforgeneralpointing.containsdirectionalvariants.