Tap Single icon
Used to represent tap actions in touchscreen scenarios. Contains single and double tap variants. The Tap Single icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Tap Single 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 { TapSingle24Regular, TapSingle24Filled } from "@fluentui/react-icons";
export function Example() {
return <TapSingle24Regular aria-label="Tap Single" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_tap_single_24_regular.svg" width="24" height="24" alt="Tap Single"> 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.7504 5.99979C13.099 5.99979 13.9292 6.9689 13.996 8.32873L14.0004 8.50827V10.6238L16.2195 11.0267C16.3064 11.0425 16.3925 11.0618 16.4778 11.0846C18.1521 11.5319 19.1702 13.2079 18.8214 14.8838L18.7788 15.0633L17.7306 18.9864C17.5126 19.8026 16.8577 20.423 16.0417 20.6029L15.8764 20.6329L13.4582 20.9799C12.5336 21.1126 11.63 20.6603 11.1779 19.8564L11.0985 19.7017L11.0694 19.6391C10.8346 19.1343 10.4822 18.6946 10.0431 18.3562L9.8497 18.2174L7.96597 16.9616L7.87207 16.9032L7.77468 16.8508L5.41177 15.6754C5.16229 15.5513 5.00217 15.2991 4.996 15.0205C4.97142 13.9119 5.46152 13.0566 6.41495 12.5799C7.1168 12.2289 8.05 12.2488 9.24116 12.5965L9.50036 12.676V8.50827C9.50036 7.055 10.3431 5.99979 11.7504 5.99979ZM11.7504 7.49979C11.2904 7.49979 11.038 7.77473 11.0043 8.36615L11.0004 8.50827V13.7523C11.0004 14.2863 10.4581 14.6492 9.96447 14.4457C8.50384 13.8434 7.52305 13.7029 7.08577 13.9215C6.83177 14.0485 6.66556 14.2124 6.57598 14.4405L6.53752 14.56L8.44277 15.5078L8.62365 15.6051L8.79802 15.7135L10.6817 16.9693C11.3645 17.4245 11.9225 18.0409 12.3076 18.7622L12.4295 19.0065L12.4586 19.069C12.5826 19.3356 12.8489 19.502 13.1365 19.5027L13.2452 19.4951L15.6634 19.1481C15.9235 19.1108 16.1423 18.9407 16.2448 18.7044L16.2814 18.5993L17.3296 14.6761C17.5791 13.7424 17.0243 12.7832 16.0906 12.5337L16.0214 12.5167L13.1164 11.9878C12.7953 11.9295 12.5532 11.672 12.508 11.3568L12.5004 11.2498V8.50827C12.5004 7.81866 12.2457 7.49979 11.7504 7.49979ZM11.7492 2.5C14.9251 2.5 17.4996 5.07455 17.4996 8.25041C17.4996 8.95318 17.3735 9.62651 17.1428 10.249L16.9986 10.1964C16.854 10.1455 16.6491 10.08 16.3912 10.0207C16.1506 9.96536 15.9081 9.92807 15.6639 9.90885C15.8801 9.39927 15.9996 8.8388 15.9996 8.25041C15.9996 5.90297 14.0966 4 11.7492 4C9.40176 4 7.49879 5.90297 7.49879 8.25041C7.49879 9.29461 7.87533 10.2509 8.50005 10.9908C8.17654 11.0187 7.90183 11.0599 7.67592 11.1143C7.32491 11.1988 7.08789 11.284 6.92371 11.3767C6.33854 10.4785 5.99879 9.40411 5.99879 8.25041C5.99879 5.07455 8.57334 2.5 11.7492 2.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/tap_single_24_regular.svg";Details
| Name | Tap Single |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_tap_single_24_regular.svg |
| Filled file | ic_fluent_tap_single_24_filled.svg |
| React components | TapSingle24Regular, TapSingle24Filled |
| License | MIT (© Microsoft Corporation) |