Component 2 Double Tap Swipe Up icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_component_2_double_tap_swipe_up_24_regular.svg" width="24" height="24" alt="Component 2 Double Tap 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 16.0168C12.3797 16.0168 12.6935 15.7347 12.7432 15.3686L12.75 15.2668V4.56184L14.9697 6.78033C15.2359 7.0466 15.6526 7.0708 15.9462 6.85295L16.0303 6.78033C16.2966 6.51406 16.3208 6.0974 16.1029 5.80379L16.0303 5.71967L12.5303 2.21967C12.2641 1.9534 11.8474 1.9292 11.5538 2.14705L11.4697 2.21967L7.96967 5.71967C7.67678 6.01256 7.67678 6.48744 7.96967 6.78033C8.23594 7.0466 8.6526 7.0708 8.94621 6.85295L9.03033 6.78033L11.25 4.56184V15.2668C11.25 15.681 11.5858 16.0168 12 16.0168ZM12 22.0168C15.866 22.0168 19 18.8828 19 15.0168C19 11.7554 16.7696 9.01499 13.7509 8.2376L13.7507 9.80132C15.9299 10.5325 17.5 12.5913 17.5 15.0168C17.5 18.0544 15.0376 20.5168 12 20.5168C8.96243 20.5168 6.5 18.0544 6.5 15.0168C6.5 12.591 8.07055 10.5319 10.2503 9.80099L10.2501 8.23734C7.2309 9.01439 5 11.7551 5 15.0168C5 18.8828 8.13401 22.0168 12 22.0168ZM12 19.5168C14.4853 19.5168 16.5 17.5021 16.5 15.0168C16.5 13.1527 15.3665 11.5533 13.7511 10.8703L13.7502 12.58C14.5071 13.1246 15 14.0131 15 15.0168C15 16.6737 13.6569 18.0168 12 18.0168C10.3431 18.0168 9 16.6737 9 15.0168C9 14.0127 9.49334 13.1238 10.2509 12.5792L10.2499 10.8698C8.63398 11.5526 7.5 13.1523 7.5 15.0168C7.5 17.5021 9.51472 19.5168 12 19.5168Z" 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_up_24_regular.svg";

Details