Sine Wave Dots icon

Use the Sine Wave Dots 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 { SineWaveDots24Regular, SineWaveDots24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SineWaveDots24Regular aria-label="Sine Wave Dots" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_sine_wave_dots_24_regular.svg" width="24" height="24" alt="Sine Wave Dots">

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="M8.6084 1.97949C9.45527 1.97952 10.0793 2.48271 10.5156 3.09961C10.9464 3.7088 11.2716 4.52759 11.5352 5.42285C12.0641 7.2194 12.4186 9.59186 12.7627 11.8857C13.1124 14.2168 13.452 16.4694 13.9443 18.1416C14.1914 18.9805 14.4586 19.6073 14.7432 20.0098C15.0222 20.4044 15.2365 20.4795 15.3916 20.4795C15.5309 20.4795 15.7048 20.4217 15.9316 20.1514C16.1702 19.8671 16.4091 19.4097 16.6377 18.7666C17.0935 17.4842 17.428 15.7004 17.7393 13.7295C17.7398 13.7263 17.7397 13.7229 17.7402 13.7197C16.7135 13.2433 16 12.2064 16 11C16 9.34315 17.3431 8 19 8C20.6569 8 22 9.34315 22 11C22 12.5693 20.7949 13.8556 19.2598 13.9873C18.9506 15.943 18.5991 17.8529 18.0908 19.2832C17.8366 19.9984 17.5224 20.6539 17.1123 21.1426C16.6906 21.645 16.1197 22.0205 15.3916 22.0205C14.5447 22.0205 13.9207 21.5173 13.4844 20.9004C13.0536 20.2912 12.7285 19.4724 12.4648 18.5771C11.9359 16.7806 11.5814 14.4081 11.2373 12.1143C10.8876 9.7832 10.548 7.53056 10.0557 5.8584C9.80864 5.01946 9.54142 4.39275 9.25684 3.99023C8.97775 3.59557 8.76349 3.52053 8.6084 3.52051C8.46908 3.52051 8.29523 3.57829 8.06836 3.84863C7.82983 4.13291 7.59087 4.59029 7.3623 5.2334C6.90655 6.5158 6.57203 8.2996 6.26074 10.2705C6.26027 10.2735 6.25929 10.2763 6.25879 10.2793C7.28617 10.7554 8 11.7932 8 13C8 14.6569 6.65685 16 5 16C3.34315 16 2 14.6569 2 13C2 11.431 3.20452 10.1439 4.73926 10.0117C5.0484 8.05629 5.40093 6.1469 5.90918 4.7168C6.16337 4.0016 6.47764 3.34612 6.8877 2.85742C7.30939 2.35502 7.88027 1.97949 8.6084 1.97949ZM5 11.5C4.17157 11.5 3.5 12.1716 3.5 13C3.5 13.8284 4.17157 14.5 5 14.5C5.82843 14.5 6.5 13.8284 6.5 13C6.5 12.1716 5.82843 11.5 5 11.5ZM19 9.5C18.1716 9.5 17.5 10.1716 17.5 11C17.5 11.8284 18.1716 12.5 19 12.5C19.8284 12.5 20.5 11.8284 20.5 11C20.5 10.1716 19.8284 9.5 19 9.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/sine_wave_dots_24_regular.svg";

Details

Keywords

mathsinewavedotsgraphdatapatternsignaloscillationperiodic