Swipe Up icon

Use the Swipe Up 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 { SwipeUp24Regular, SwipeUp24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SwipeUp24Regular aria-label="Swipe Up" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_swipe_up_24_regular.svg" width="24" height="24" alt="Swipe Up">

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 18.0034C12.3797 18.0034 12.6935 17.7214 12.7432 17.3557L12.75 17.254V4.55968L14.9697 6.77631C15.2359 7.04235 15.6526 7.06654 15.9462 6.84887L16.0303 6.77631C16.2966 6.51027 16.3208 6.09395 16.1029 5.80059L16.0303 5.71654L12.5303 2.21949C12.2641 1.95344 11.8474 1.92926 11.5538 2.14693L11.4697 2.21949L7.96967 5.71654C7.67678 6.00919 7.67678 6.48366 7.96967 6.77631C8.23594 7.04235 8.6526 7.06654 8.94621 6.84887L9.03033 6.77631L11.25 4.55968V17.254C11.25 17.6679 11.5858 18.0034 12 18.0034ZM12 22C14.7614 22 17 19.7633 17 17.0042C17 14.8606 15.6488 13.0323 13.7509 12.3233L13.7507 13.9754C14.7965 14.5802 15.5 15.7101 15.5 17.0042C15.5 18.9356 13.933 20.5013 12 20.5013C10.067 20.5013 8.5 18.9356 8.5 17.0042C8.5 15.7097 9.20396 14.5795 10.2502 13.9748L10.2501 12.3229C8.35172 13.0316 7 14.8602 7 17.0042C7 19.7633 9.23858 22 12 22Z" 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_up_24_regular.svg";

Details

Keywords

gesturetouchscreenmobiletabletdirection