Smartwatch icon

Use the Smartwatch 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 { Smartwatch24Regular, Smartwatch24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Smartwatch24Regular aria-label="Smartwatch" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_smartwatch_24_regular.svg" width="24" height="24" alt="Smartwatch">

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="M7.5 6.40135V4C7.5 2.89543 8.39543 2 9.5 2H14.5C15.6046 2 16.5 2.89543 16.5 4V6.40135C17.3967 6.92006 18 7.88958 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.40135ZM9.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 20Z" 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_24_regular.svg";

Details

Keywords

devicesmarttimeclock