Smartwatch Dot icon
Used to represent a digital watch. The Smartwatch Dot 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 Smartwatch Dot 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 { SmartwatchDot24Regular, SmartwatchDot24Filled } from "@fluentui/react-icons";
export function Example() {
return <SmartwatchDot24Regular aria-label="Smartwatch Dot" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_smartwatch_dot_24_regular.svg" width="24" height="24" alt="Smartwatch Dot"> 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="M14.5 2C15.2828 2 15.9606 2.44977 16.2891 3.10499C16.1031 3.5324 16 4.00416 16 4.5C16 5.15983 16.1826 5.77702 16.5 6.30379V6.40135C16.5344 6.42125 16.5684 6.44182 16.6019 6.46304C16.8515 6.83078 17.1692 7.14851 17.537 7.39809C17.8302 7.86157 18 8.41096 18 9V10C18.5523 10 19 10.4477 19 11V12C19 12.5523 18.5523 13 18 13V15C18 16.1104 17.3967 17.0799 16.5 17.5987L16.5 20C16.5 21.1046 15.6046 22 14.5 22H9.5C8.39543 22 7.5 21.1046 7.5 20L7.5 17.5987C6.6033 17.0799 6 16.1104 6 15V9C6 7.88958 6.6033 6.92006 7.5 6.40135V4C7.5 2.89543 8.39543 2 9.5 2H14.5ZM9.5 3.5C9.22386 3.5 9 3.72386 9 4V6H15V4C15 3.72386 14.7761 3.5 14.5 3.5H9.5ZM16.5 15V9C16.5 8.17157 15.8284 7.5 15 7.5H9C8.17157 7.5 7.5 8.17157 7.5 9V15C7.5 15.8284 8.17157 16.5 9 16.5H15C15.8284 16.5 16.5 15.8284 16.5 15ZM9 20C9 20.2761 9.22386 20.5 9.5 20.5H14.5C14.7761 20.5 15 20.2761 15 20V18H9L9 20ZM22 4.5C22 3.11929 20.8807 2 19.5 2C18.1193 2 17 3.11929 17 4.5C17 5.88071 18.1193 7 19.5 7C20.8807 7 22 5.88071 22 4.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/smartwatch_dot_24_regular.svg";Details
| Name | Smartwatch Dot |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_smartwatch_dot_24_regular.svg |
| Filled file | ic_fluent_smartwatch_dot_24_filled.svg |
| React components | SmartwatchDot24Regular, SmartwatchDot24Filled |
| License | MIT (© Microsoft Corporation) |