Arrow Up Exclamation icon

Use the Arrow Up Exclamation 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 { ArrowUpExclamation24Regular, ArrowUpExclamation24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowUpExclamation24Regular aria-label="Arrow Up Exclamation" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_up_exclamation_24_regular.svg" width="24" height="24" alt="Arrow Up Exclamation">

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="M18 4.56066V21.25C18 21.6642 17.6642 22 17.25 22C16.8358 22 16.5 21.6642 16.5 21.25V4.56066L14.2803 6.78033C13.9874 7.07322 13.5126 7.07322 13.2197 6.78033C12.9268 6.48744 12.9268 6.01256 13.2197 5.71967L16.7197 2.21967C17.0126 1.92678 17.4874 1.92678 17.7803 2.21967L21.2803 5.71967C21.5732 6.01256 21.5732 6.48744 21.2803 6.78033C20.9874 7.07322 20.5126 7.07322 20.2197 6.78033L18 4.56066ZM3.125 5.87732C3.125 3.73701 4.86006 2.00195 7.00037 2.00195C9.14067 2.00195 10.8757 3.73701 10.8757 5.87732C10.8757 8.827 9.67054 12.4412 9.06462 14.0809C8.74086 14.957 7.90567 15.4995 7.00253 15.4995C6.09696 15.4995 5.26055 14.9542 4.93776 14.0759C4.33243 12.4289 3.125 8.79606 3.125 5.87732ZM7.00037 3.50195C5.68849 3.50195 4.625 4.56544 4.625 5.87732C4.625 8.50056 5.73867 11.9069 6.34568 13.5585C6.44122 13.8184 6.69541 13.9995 7.00253 13.9995C7.30895 13.9995 7.56212 13.8194 7.65762 13.561C8.26395 11.9202 9.37574 8.53153 9.37574 5.87732C9.37574 4.56544 8.31225 3.50195 7.00037 3.50195ZM4.5 19.5021C4.5 18.1208 5.61979 17.001 7.00112 17.001C8.38245 17.001 9.50224 18.1208 9.50224 19.5021C9.50224 20.8834 8.38245 22.0032 7.00112 22.0032C5.61979 22.0032 4.5 20.8834 4.5 19.5021ZM7.00112 18.501C6.44822 18.501 6 18.9492 6 19.5021C6 20.055 6.44822 20.5032 7.00112 20.5032C7.55402 20.5032 8.00224 20.055 8.00224 19.5021C8.00224 18.9492 7.55402 18.501 7.00112 18.501Z" 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/arrow_up_exclamation_24_regular.svg";

Details

Keywords

priorityeditcreatelettersort