Double Swipe Down icon

Use the Double 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 { DoubleSwipeDown24Regular, DoubleSwipeDown24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DoubleSwipeDown24Regular aria-label="Double Swipe Down" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_double_swipe_down_24_regular.svg" width="24" height="24" alt="Double 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="M6.75 6C7.1297 6 7.44349 6.28215 7.49315 6.64823L7.5 6.75V19.439L9.71967 17.2197C9.98594 16.9534 10.4026 16.9292 10.6962 17.1471L10.7803 17.2197C11.0466 17.4859 11.0708 17.9026 10.8529 18.1962L10.7803 18.2803L7.28033 21.7803C7.01406 22.0466 6.5974 22.0708 6.30379 21.8529L6.21967 21.7803L2.71967 18.2803C2.42678 17.9874 2.42678 17.5126 2.71967 17.2197C2.98594 16.9534 3.4026 16.9292 3.69621 17.1471L3.78033 17.2197L6 19.439V6.75C6 6.33579 6.33579 6 6.75 6ZM17.2477 6C17.6274 6 17.9412 6.28215 17.9908 6.64823L17.9977 6.75V19.439L20.2174 17.2197C20.4836 16.9534 20.9003 16.9292 21.1939 17.1471L21.278 17.2197C21.5443 17.4859 21.5685 17.9026 21.3506 18.1962L21.278 18.2803L17.778 21.7803C17.5117 22.0466 17.0951 22.0708 16.8015 21.8529L16.7174 21.7803L13.2174 18.2803C12.9245 17.9874 12.9245 17.5126 13.2174 17.2197C13.4836 16.9534 13.9003 16.9292 14.1939 17.1471L14.278 17.2197L16.4977 19.439V6.75C16.4977 6.33579 16.8335 6 17.2477 6ZM6.75 2C9.37335 2 11.5 4.12665 11.5 6.75C11.5 8.7549 10.2579 10.4697 8.50117 11.1668L8.50154 9.4881C9.40276 8.9104 10 7.89995 10 6.75C10 4.95507 8.54493 3.5 6.75 3.5C4.95507 3.5 3.5 4.95507 3.5 6.75C3.5 7.90037 4.09768 8.91115 4.99946 9.48874L4.99983 11.1672C3.24261 10.4703 2 8.75529 2 6.75C2 4.12665 4.12665 2 6.75 2ZM17.2477 2C19.871 2 21.9977 4.12665 21.9977 6.75C21.9977 8.7549 20.7555 10.4697 18.9989 11.1668L18.9992 9.4881C19.9004 8.9104 20.4977 7.89995 20.4977 6.75C20.4977 4.95507 19.0426 3.5 17.2477 3.5C15.4528 3.5 13.9977 4.95507 13.9977 6.75C13.9977 7.90037 14.5954 8.91115 15.4971 9.48874L15.4975 11.1672C13.7403 10.4703 12.4977 8.75529 12.4977 6.75C12.4977 4.12665 14.6243 2 17.2477 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/double_swipe_down_24_regular.svg";

Details

Keywords

actiontaptouchscreengesture