Component 2 Double Tap Swipe Down icon

Use the Component 2 Double Tap 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 { Component2DoubleTapSwipeDown24Regular, Component2DoubleTapSwipeDown24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_component_2_double_tap_swipe_down_24_regular.svg" width="24" height="24" alt="Component 2 Double Tap 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 8C12.3797 8 12.6935 8.28215 12.7432 8.64823L12.75 8.75V19.455L14.9697 17.2365C15.2359 16.9702 15.6526 16.946 15.9462 17.1639L16.0303 17.2365C16.2966 17.5028 16.3208 17.9194 16.1029 18.213L16.0303 18.2972L12.5303 21.7972C12.2641 22.0634 11.8474 22.0876 11.5538 21.8698L11.4697 21.7972L7.96967 18.2972C7.67678 18.0043 7.67678 17.5294 7.96967 17.2365C8.23594 16.9702 8.6526 16.946 8.94621 17.1639L9.03033 17.2365L11.25 19.455V8.75C11.25 8.33579 11.5858 8 12 8ZM12 2C15.866 2 19 5.13401 19 9C19 12.2614 16.7696 15.0018 13.7509 15.7792L13.7507 14.2155C15.9299 13.4843 17.5 11.4255 17.5 9C17.5 5.96243 15.0376 3.5 12 3.5C8.96243 3.5 6.5 5.96243 6.5 9C6.5 11.4259 8.07055 13.4849 10.2503 14.2158L10.2501 15.7795C7.2309 15.0024 5 12.2618 5 9C5 5.13401 8.13401 2 12 2ZM12 4.5C14.4853 4.5 16.5 6.51472 16.5 9C16.5 10.8642 15.3665 12.4636 13.7511 13.1466L13.7502 11.4369C14.5071 10.8923 15 10.0037 15 9C15 7.34315 13.6569 6 12 6C10.3431 6 9 7.34315 9 9C9 10.0041 9.49334 10.8931 10.2509 11.4376L10.2499 13.147C8.63398 12.4642 7.5 10.8645 7.5 9C7.5 6.51472 9.51472 4.5 12 4.5Z" 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/component_2_double_tap_swipe_down_24_regular.svg";

Details