Arrow Forward Down Lightning icon
Used for forward actions in mail. The Arrow Forward Down Lightning 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 Forward Down Lightning 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 { ArrowForwardDownLightning24Regular, ArrowForwardDownLightning24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowForwardDownLightning24Regular aria-label="Arrow Forward Down Lightning" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_forward_down_lightning_24_regular.svg" width="24" height="24" alt="Arrow Forward Down Lightning"> 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="M19.5872 9.50038L16.6242 6.53743C16.3314 6.24454 16.3314 5.76966 16.6242 5.47677C16.8905 5.2105 17.3072 5.1863 17.6008 5.40415L17.6849 5.47677L21.9275 9.71941C22.1938 9.98568 22.218 10.4023 22.0002 10.696L21.9275 10.7801L17.6849 15.0227C17.392 15.3156 16.9171 15.3156 16.6242 15.0227C16.358 14.7564 16.3338 14.3398 16.5516 14.0462L16.6242 13.9621L19.5872 11.0004L13.8972 10.9997C9.69932 10.9997 6.28097 7.66212 6.15105 3.49576L6.14722 3.24974C6.14722 2.83553 6.483 2.49974 6.89722 2.49974C7.31143 2.49974 7.64722 2.83553 7.64722 3.24974C7.64722 6.62481 10.3225 9.37505 13.6681 9.49562L13.8972 9.49974L19.5872 9.50038ZM5.31767 12H10.1453C10.5277 12 10.7685 12.4118 10.5811 12.7451L8.7502 16H10.2463C10.8909 16 11.2352 16.7593 10.8105 17.2441L5.98666 22.7519C5.48211 23.328 4.54401 22.8375 4.72916 22.0945L5.5002 19H2.49767C2.13127 19 1.88931 18.6189 2.04516 18.2873L4.86516 12.2873C4.94758 12.112 5.1239 12 5.31767 12Z" 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_forward_down_lightning_24_regular.svg";Details
| Name | Arrow Forward Down Lightning |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_forward_down_lightning_24_regular.svg |
| Filled file | ic_fluent_arrow_forward_down_lightning_24_filled.svg |
| React components | ArrowForwardDownLightning24Regular, ArrowForwardDownLightning24Filled |
| License | MIT (© Microsoft Corporation) |