Binder Triangle icon

Use the Binder Triangle 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 { BinderTriangle24Regular, BinderTriangle24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M3 4.25C3 3.00736 4.00736 2 5.25 2H14.75C15.9926 2 17 3.00736 17 4.25V6.55059L15.5 8.42525V4.25C15.5 3.83579 15.1642 3.5 14.75 3.5H5.25C4.83579 3.5 4.5 3.83579 4.5 4.25V5H5.25C5.66421 5 6 5.33579 6 5.75C6 6.16421 5.66421 6.5 5.25 6.5H4.5V9.75H5.25C5.66421 9.75 6 10.0858 6 10.5C6 10.9142 5.66421 11.25 5.25 11.25H4.5V14.5H5.25C5.66421 14.5 6 14.8358 6 15.25C6 15.6642 5.66421 16 5.25 16H4.5V16.75C4.5 17.1642 4.83579 17.5 5.25 17.5H8.23887L7.03865 19H5.25C4.00736 19 3 17.9926 3 16.75V16H2.25C1.83579 16 1.5 15.6642 1.5 15.25C1.5 14.8358 1.83579 14.5 2.25 14.5H3V11.25H2.25C1.83579 11.25 1.5 10.9142 1.5 10.5C1.5 10.0858 1.83579 9.75 2.25 9.75H3V6.5H2.25C1.83579 6.5 1.5 6.16421 1.5 5.75C1.5 5.33579 1.83579 5 2.25 5H3V4.25ZM7.75 7C7.33579 7 7 7.33579 7 7.75C7 8.16421 7.33579 8.5 7.75 8.5H12.25C12.6642 8.5 13 8.16421 13 7.75C13 7.33579 12.6642 7 12.25 7H7.75ZM18 13.1261C18 12.6534 17.4047 12.4447 17.1095 12.8138L12.8122 18.1879C12.5504 18.5153 12.7835 19.0002 13.2027 19.0002H17.25C17.6642 19.0002 18 18.6644 18 18.2502V13.1261ZM16.5407 17.5409H15.1981L16.5407 15.8619V17.5409ZM21 6.00263C21 5.0574 19.8097 4.63982 19.2192 5.37787L7.21968 20.3745C6.69579 21.0292 7.16195 21.9993 8.0005 21.9993H18.75C19.9926 21.9993 21 20.9919 21 19.7493V6.00263ZM19.5 7.42782V19.7493C19.5 20.1635 19.1642 20.4993 18.75 20.4993H9.04093L19.5 7.42782Z" 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/binder_triangle_24_regular.svg";

Details

Keywords

classworkclassworkeduteacherstudentmathjournalnotenotepadnotebook