Tap Double icon

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

export function Example() {
  return <TapDouble24Regular aria-label="Tap Double" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_tap_double_24_regular.svg" width="24" height="24" alt="Tap Double">

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="M11.7498 7C13.0985 7 13.9286 7.96911 13.9955 9.32894L13.9998 9.50848V11.624L16.219 12.0269C16.3058 12.0427 16.392 12.062 16.4772 12.0848C18.1515 12.5321 19.1696 14.2081 18.8209 15.884L18.7782 16.0635L17.7301 19.9867C17.512 20.8028 16.8572 21.4232 16.0412 21.6031L15.8759 21.6331L13.4577 21.9801C12.5331 22.1128 11.6295 21.6605 11.1774 20.8567L11.098 20.7019L11.0689 20.6393C10.8341 20.1345 10.4817 19.6948 10.0426 19.3564L9.84916 19.2176L7.96543 17.9618L7.87154 17.9034L7.77415 17.851L5.41123 16.6756C5.16175 16.5515 5.00164 16.2993 4.99547 16.0207C4.97089 14.9121 5.46099 14.0568 6.41442 13.5801C7.11627 13.2291 8.04946 13.249 9.24062 13.5967L9.49983 13.6762V9.50848C9.49983 8.05521 10.3425 7 11.7498 7ZM11.7498 8.5C11.2899 8.5 11.0374 8.77494 11.0037 9.36636L10.9998 9.50848V14.7525C10.9998 15.2865 10.4576 15.6494 9.96394 15.4459C8.50331 14.8436 7.52252 14.7031 7.08524 14.9217C6.83124 15.0487 6.66502 15.2126 6.57544 15.4407L6.53699 15.5603L8.44224 16.508L8.62311 16.6053L8.79748 16.7137L10.6812 17.9695C11.3639 18.4247 11.922 19.0411 12.3071 19.7624L12.429 20.0067L12.4581 20.0692C12.5821 20.3358 12.8484 20.5023 13.136 20.5029L13.2446 20.4953L15.6629 20.1483C15.923 20.111 16.1417 19.941 16.2443 19.7046L16.2809 19.5995L17.3291 15.6763C17.5785 14.7426 17.0238 13.7834 16.0901 13.5339L16.0208 13.5169L13.1158 12.988C12.7948 12.9297 12.5527 12.6722 12.5074 12.3571L12.4998 12.25V9.50848C12.4998 8.81887 12.2452 8.5 11.7498 8.5ZM11.7487 2C15.7531 2 18.9993 5.24621 18.9993 9.25062C18.9993 10.2367 18.8024 11.1768 18.4459 12.0338C18.0705 11.702 17.6315 11.4335 17.1413 11.2489C17.3731 10.6271 17.4993 9.9536 17.4993 9.25062C17.4993 6.07464 14.9246 3.5 11.7487 3.5C8.57269 3.5 5.99805 6.07464 5.99805 9.25062C5.99805 10.4042 6.33772 11.4784 6.9225 12.3788C6.58477 12.4339 6.26691 12.5358 5.96721 12.6856C5.80624 12.7661 5.65453 12.8551 5.51229 12.9521C4.86855 11.8697 4.49805 10.6034 4.49805 9.25062C4.49805 5.24621 7.74426 2 11.7487 2ZM11.7487 4.50178C14.3714 4.50178 16.4975 6.62791 16.4975 9.25062C16.4975 9.86873 16.3794 10.4593 16.1646 11.0009L14.9998 10.7892V9.50848L14.9957 9.31367L14.9975 9.25062C14.9975 8.57003 14.7882 7.93832 14.4305 7.41633L14.3412 7.28383C13.7832 6.49647 12.8918 6 11.7498 6C10.5747 6 9.66502 6.52568 9.11074 7.35305C8.72658 7.88672 8.49983 8.54219 8.49983 9.25062L8.50216 9.36135L8.49983 9.50848V12.3984L8.23771 12.3621C8.0003 12.3324 7.78141 12.2186 7.62077 12.0413C7.20681 11.5844 6.99983 10.6541 6.99983 9.25062C6.99983 6.62791 9.12596 4.50178 11.7487 4.50178Z" 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/tap_double_24_regular.svg";

Details

Keywords

handtouchgesturedevicephysical