Fluent Icons

FPS 30 icon

Used in scenarios where frames per second can be edited, or represented. The FPS 30 icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 5 sizes from 16 to 48 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
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

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_fps_30_24_regular.svg

FPS 30 icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <Fps3024Regular aria-label="FPS 30" />;
}

FPS 30 icon in SVG

npm install @fluentui/svg-icons

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

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

FPS 30 icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

FPS 30 icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.fps_30_24_regular)

FPS 30 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="&#xE67A;" FontSize="24" />

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

FPS 30 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_fps_30_24_regular"></i>

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

FPS 30 icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_fps_30_24_regular

FPS 30 icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .fps3024Regular)

FPS 30 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 FPS 30 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 { Fps3024Regular, Fps3024Filled } from "@fluentui/react-icons";

export function Example() {
  return <Fps3024Regular aria-label="FPS 30" />;
}

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_fps_30_24_regular.svg" width="24" height="24" alt="FPS 30">

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.12508 4.5H7.87508C7.42625 4.5 7.02764 4.71505 6.77668 5.04773C6.59572 5.28762 6.34438 5.5 6.04389 5.5C5.50346 5.5 5.0791 5.01119 5.33165 4.5334C5.81367 3.62145 6.7718 3 7.87508 3H8.12508C9.7129 3 11.0001 4.28718 11.0001 5.875C11.0001 6.71686 10.6382 7.4742 10.0616 8C10.6382 8.52579 11.0001 9.28314 11.0001 10.125C11.0001 11.7128 9.7129 13 8.12508 13H7.87508C6.7718 13 5.81367 12.3786 5.33165 11.4666C5.0791 10.9888 5.50346 10.5 6.04389 10.5C6.34438 10.5 6.59572 10.7124 6.77668 10.9523C7.02764 11.285 7.42625 11.5 7.87508 11.5H8.12508C8.88447 11.5 9.50008 10.8844 9.50008 10.125C9.50008 9.36561 8.88447 8.75 8.12508 8.75H8.00008C7.58586 8.75 7.2499 8.41421 7.2499 8C7.2499 7.58579 7.58568 7.25 7.9999 7.25H8.12508C8.88447 7.25 9.50008 6.63439 9.50008 5.875C9.50008 5.11561 8.88447 4.5 8.12508 4.5ZM14 17.25C14 16.0074 12.9926 15 11.75 15H10.25L10.1482 15.0068C9.78215 15.0565 9.5 15.3703 9.5 15.75V21.25L9.50685 21.3518C9.55651 21.7178 9.8703 22 10.25 22L10.3518 21.9931C10.7178 21.9435 11 21.6297 11 21.25V19.5H11.75L11.904 19.4948C13.0748 19.4156 14 18.4409 14 17.25ZM11 16.5H11.75L11.8518 16.5068C12.2178 16.5565 12.5 16.8703 12.5 17.25C12.5 17.6642 12.1642 18 11.75 18H11V16.5ZM20 17C20 15.8954 19.1046 15 18 15H17.375L17.2232 15.0053C16.1205 15.0831 15.25 16.0024 15.25 17.125C15.25 18.2986 16.2014 19.25 17.375 19.25H17.875L17.9674 19.2568C18.2687 19.3014 18.5 19.5612 18.5 19.875C18.5 20.2202 18.2202 20.5 17.875 20.5H17.25L17.1601 20.4919C16.9269 20.4496 16.75 20.2455 16.75 20L16.7432 19.8982C16.6935 19.5321 16.3797 19.25 16 19.25C15.5858 19.25 15.25 19.5858 15.25 20C15.25 21.1046 16.1454 22 17.25 22H17.875L18.0268 21.9947C19.1295 21.9168 20 20.9976 20 19.875C20 18.7014 19.0486 17.75 17.875 17.75H17.375L17.2826 17.7432C16.9813 17.6986 16.75 17.4388 16.75 17.125C16.75 16.7798 17.0298 16.5 17.375 16.5H18L18.0899 16.508C18.3231 16.5504 18.5 16.7545 18.5 17L18.5068 17.1018C18.5565 17.4678 18.8703 17.75 19.25 17.75C19.6642 17.75 20 17.4142 20 17ZM8.5 15.75C8.5 15.3358 8.16421 15 7.75 15H4.75L4.64823 15.0068C4.28215 15.0565 4 15.3703 4 15.75V21.2312L4.00685 21.333C4.05651 21.6991 4.3703 21.9812 4.75 21.9812L4.85177 21.9744C5.21785 21.9247 5.5 21.6109 5.5 21.2312V19.5021L7.25 19.5028L7.35177 19.496C7.71785 19.4463 8 19.1325 8 18.7528C8 18.3386 7.66421 18.0028 7.25 18.0028L5.5 18.0021V16.4991L7.75 16.5L7.85177 16.4931C8.21785 16.4435 8.5 16.1297 8.5 15.75ZM17.9949 5.81999C17.9038 4.24815 16.6003 3.00159 15.0057 3.00159L14.8184 3.00667C13.2466 3.09774 12 4.40126 12 5.99593V10.0057L12.0051 10.1816C12.0928 11.6952 13.3048 12.9072 14.8184 12.9949L15.0057 13L15.1816 12.9949C16.7534 12.9038 18 11.6003 18 10.0057V5.99593L17.9949 5.81999ZM14.9943 4.50159H15.0057C15.831 4.50159 16.5 5.17063 16.5 5.99593V10.0057L16.4932 10.1496C16.4253 10.86 15.86 11.4253 15.1496 11.4932L14.9943 11.5L14.8504 11.4932C14.0926 11.4207 13.5 10.7824 13.5 10.0057V5.99593L13.5068 5.85201C13.5793 5.09423 14.2176 4.50159 14.9943 4.50159Z" fill="currentColor"/></svg>

Details

NameFPS 30
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px, 48 px
Regular (outlined) fileic_fluent_fps_30_24_regular.svg
Filled fileic_fluent_fps_30_24_filled.svg
React (Regular)Fps3016Regular, Fps3020Regular, Fps3024Regular, Fps3028Regular, Fps3048Regular
React (Filled)Fps3016Filled, Fps3020Filled, Fps3024Filled, Fps3028Filled, Fps3048Filled
LicenseMIT (© Microsoft Corporation)

Keywords

camera

Related icons

FPS 120FPS 240FPS 60FPS 960Shifts 30 MinutesSkip Forward 30Fps 240 20Circle HighlightCircle ShadowF StopMeet NowRectangle Landscape Sparkle