Arrow Down Exclamation icon
Used in sorting by priority. The Arrow Down Exclamation icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Arrow Down 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 { ArrowDownExclamation24Regular, ArrowDownExclamation24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowDownExclamation24Regular aria-label="Arrow Down Exclamation" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_down_exclamation_24_regular.svg" width="24" height="24" alt="Arrow Down 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 2.75C18 2.33579 17.6642 2 17.25 2C16.8358 2 16.5 2.33579 16.5 2.75V19.4393L14.2803 17.2197C13.9874 16.9268 13.5126 16.9268 13.2197 17.2197C12.9268 17.5126 12.9268 17.9874 13.2197 18.2803L16.7197 21.7803C17.0126 22.0732 17.4874 22.0732 17.7803 21.7803L21.2803 18.2803C21.5732 17.9874 21.5732 17.5126 21.2803 17.2197C20.9874 16.9268 20.5126 16.9268 20.2197 17.2197L18 19.4393V2.75ZM3.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_down_exclamation_24_regular.svg";Details
| Name | Arrow Down Exclamation |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_down_exclamation_24_regular.svg |
| Filled file | ic_fluent_arrow_down_exclamation_24_filled.svg |
| React components | ArrowDownExclamation24Regular, ArrowDownExclamation24Filled |
| License | MIT (© Microsoft Corporation) |