Fluent Icons

Clock Pause icon

Used in time scenarios. The Clock Pause icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 3 sizes from 16 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_clock_pause_24_regular.svg

Clock Pause icon in React

npm install @fluentui/react-icons

import { ClockPause24Regular } from "@fluentui/react-icons";

export function Example() {
  return <ClockPause24Regular aria-label="Clock Pause" />;
}

Clock Pause icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/clock_pause_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/clock_pause_24_regular.svg" width="24" height="24" alt="Clock Pause">

Clock Pause icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.ClockPause())" />

Clock Pause icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.clock_pause_24_regular)

Clock Pause icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xE375;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xE375;" FontSize="24" />

Clock Pause icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_clock_pause_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\e375";
  font-size: 24px;
}

Clock Pause icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_clock_pause_24_regular" />

// Kotlin
R.drawable.ic_fluent_clock_pause_24_regular

Clock Pause icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .clockPause24Regular)

Clock Pause icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

Use the Clock Pause 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 { ClockPause24Regular, ClockPause24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ClockPause24Regular aria-label="Clock Pause" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_clock_pause_24_regular.svg" width="24" height="24" alt="Clock Pause">

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="M4.5 11C4.5 6.30558 8.30558 2.5 13 2.5C17.6944 2.5 21.5 6.30558 21.5 11C21.5 15.6944 17.6944 19.5 13 19.5C12.8957 19.5 12.7917 19.4981 12.6883 19.4944C12.5218 20.0114 12.2923 20.5001 12.0089 20.9515C12.3349 20.9836 12.6656 21 13 21C18.5228 21 23 16.5228 23 11C23 5.47715 18.5228 1 13 1C7.47715 1 3 5.47715 3 11C3 11.3344 3.01642 11.6651 3.04849 11.9911C3.49991 11.7077 3.98862 11.4782 4.50561 11.3117C4.50188 11.2083 4.5 11.1043 4.5 11ZM12.9931 5.64827C12.9435 5.28233 12.6295 5 12.25 5C11.836 5 11.5 5.336 11.5 5.75V11.75L11.5069 11.8517C11.5565 12.2177 11.8705 12.5 12.25 12.5H16.25L16.3517 12.4931C16.7177 12.4435 17 12.1295 17 11.75C17 11.336 16.664 11 16.25 11H13V5.75L12.9931 5.64827ZM12 17.5C12 20.5376 9.53757 23 6.5 23C3.46243 23 1 20.5376 1 17.5C1 14.4624 3.46243 12 6.5 12C9.53757 12 12 14.4624 12 17.5ZM4.5 20.5C4.77614 20.5 5 20.2761 5 20V15C5 14.7239 4.77614 14.5 4.5 14.5C4.22386 14.5 4 14.7239 4 15V20C4 20.2761 4.22386 20.5 4.5 20.5ZM8.5 20.5C8.77614 20.5 9 20.2761 9 20V15C9 14.7239 8.77614 14.5 8.5 14.5C8.22386 14.5 8 14.7239 8 15V20C8 20.2761 8.22386 20.5 8.5 20.5Z" fill="currentColor"/></svg>

Details

NameClock Pause
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px
Regular (outlined) fileic_fluent_clock_pause_24_regular.svg
Filled fileic_fluent_clock_pause_24_filled.svg
React (Regular)ClockPause16Regular, ClockPause20Regular, ClockPause24Regular
React (Filled)ClockPause16Filled, ClockPause20Filled, ClockPause24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

timewatchanalog

Related icons

ClockClock AlarmClock Arrow DownloadClock BillClock DismissClock ToolboxCalendar ClockClipboard ClockClock LockCredit Card ClockDocument Bullet List ClockDocument Text Clock