Haptic Weak icon

Use the Haptic Weak 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 { HapticWeak24Regular, HapticWeak24Filled } from "@fluentui/react-icons";

export function Example() {
  return <HapticWeak24Regular aria-label="Haptic Weak" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_haptic_weak_24_regular.svg" width="24" height="24" alt="Haptic Weak">

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="M15.245 20.9989C15.111 20.9989 14.974 20.9619 14.851 20.8859C14.776 20.8389 12.999 19.6939 12.999 16.8709C12.999 15.4389 13.456 14.6949 13.86 14.0379C14.216 13.4579 14.499 12.9989 14.499 11.9919C14.499 10.9849 14.217 10.5289 13.86 9.94894C13.457 9.29394 12.999 8.55094 12.999 7.11994C12.999 4.30094 14.776 3.16094 14.853 3.11394C15.205 2.89294 15.666 3.00194 15.886 3.35294C16.104 3.70194 15.999 4.16094 15.654 4.38194C15.594 4.42194 14.5 5.17894 14.5 7.11994C14.5 8.12494 14.782 8.58294 15.139 9.16194C15.542 9.81694 16 10.5599 16 11.9909C16 13.4219 15.543 14.1669 15.139 14.8239C14.783 15.4039 14.5 15.8629 14.5 16.8699C14.5 18.8279 15.609 19.5879 15.656 19.6189C15.998 19.8459 16.098 20.3079 15.876 20.6529C15.732 20.8759 15.491 20.9979 15.245 20.9979V20.9989ZM9.87602 20.6539C10.099 20.3089 9.99802 19.8469 9.65602 19.6199C9.60902 19.5889 8.50002 18.8289 8.50002 16.8709C8.50002 15.8629 8.78202 15.4049 9.13902 14.8249C9.54302 14.1679 10 13.4239 10 11.9919C10 10.5599 9.54202 9.81794 9.13902 9.16294C8.78302 8.58294 8.50002 8.12594 8.50002 7.12094C8.50002 5.17994 9.59502 4.42194 9.65402 4.38294C10 4.16194 10.104 3.70294 9.88602 3.35394C9.66702 3.00294 9.20402 2.89394 8.85302 3.11494C8.77702 3.16194 6.99902 4.30294 6.99902 7.12094C6.99902 8.55094 7.45702 9.29394 7.86002 9.94994C8.21602 10.5299 8.49902 10.9869 8.49902 11.9929C8.49902 12.9989 8.21702 13.4589 7.86002 14.0389C7.45602 14.6959 6.99902 15.4399 6.99902 16.8719C6.99902 19.6949 8.77502 20.8399 8.85102 20.8869C8.97402 20.9639 9.11102 21.0009 9.24502 20.9999C9.49102 20.9999 9.73202 20.8769 9.87602 20.6549V20.6539Z" 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/haptic_weak_24_regular.svg";

Details

Keywords

devicevibrateshakesilencedalertnotificationtactilefeedbacktouch