FPS 30 icon

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" />;
}

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>

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/fps_30_24_regular.svg";

Details

Keywords

cameraframespersecond