Swipe Down icon
Used in swipe gesture scenarios. Contains direction variant. The Swipe Down 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 Swipe 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 { SwipeDown24Regular, SwipeDown24Filled } from "@fluentui/react-icons";
export function Example() {
return <SwipeDown24Regular aria-label="Swipe Down" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_swipe_down_24_regular.svg" width="24" height="24" alt="Swipe 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="M12 5.99664C12.3797 5.99664 12.6935 6.27855 12.7432 6.64432L12.75 6.74601V19.4403L14.9697 17.2237C15.2359 16.9576 15.6526 16.9335 15.9462 17.1511L16.0303 17.2237C16.2966 17.4897 16.3208 17.906 16.1029 18.1994L16.0303 18.2835L12.5303 21.7805C12.2641 22.0466 11.8474 22.0707 11.5538 21.8531L11.4697 21.7805L7.96967 18.2835C7.67678 17.9908 7.67678 17.5163 7.96967 17.2237C8.23594 16.9576 8.6526 16.9335 8.94621 17.1511L9.03033 17.2237L11.25 19.4403V6.74601C11.25 6.33214 11.5858 5.99664 12 5.99664ZM12 2C14.7614 2 17 4.23669 17 6.99579C17 9.13942 15.6488 10.9677 13.7509 11.6767L13.7507 10.0246C14.7965 9.41982 15.5 8.28989 15.5 6.99579C15.5 5.06442 13.933 3.49874 12 3.49874C10.067 3.49874 8.5 5.06442 8.5 6.99579C8.5 8.2903 9.20396 9.42053 10.2502 10.0252L10.2501 11.6771C8.35172 10.9684 7 9.1398 7 6.99579C7 4.23669 9.23858 2 12 2Z" 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/swipe_down_24_regular.svg";Details
| Name | Swipe Down |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_swipe_down_24_regular.svg |
| Filled file | ic_fluent_swipe_down_24_filled.svg |
| React components | SwipeDown24Regular, SwipeDown24Filled |
| License | MIT (© Microsoft Corporation) |