ios recording icon

ios-recording from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.

Name: ios-recording
Set: IonIcons
Style: Regular
Viewbox: 512×512
License: MIT

1 other variant in IonIcons

Use the ios recording icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M386.2 146h-.1c-60.6 0-109.8 49.2-109.8 110.1 0 30.5 12.3 58 32.3 77.9H203.5c19.9-19.9 32.3-47.5 32.3-77.9 0-60.8-49.2-110.1-109.8-110.1h-.1-.1C65.2 146 16 195.2 16 256s49.2 110 109.8 110h260.4c60.6 0 109.8-49.2 109.8-110s-49.2-110-109.8-110zM464 256c0 43.1-34.9 78.2-77.9 78.2s-77.9-35.1-77.9-78.2 34.9-78.2 77.9-78.2S464 212.9 464 256zm-338.1 78.2C83 334.2 48 299.1 48 256s34.9-78.2 77.9-78.2 77.9 35.1 77.9 78.2-34.9 78.2-77.9 78.2z" fill="currentColor"/></svg>

React

import type { SVGProps } from "react";

export function IonIosRecording(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M386.2 146h-.1c-60.6 0-109.8 49.2-109.8 110.1 0 30.5 12.3 58 32.3 77.9H203.5c19.9-19.9 32.3-47.5 32.3-77.9 0-60.8-49.2-110.1-109.8-110.1h-.1-.1C65.2 146 16 195.2 16 256s49.2 110 109.8 110h260.4c60.6 0 109.8-49.2 109.8-110s-49.2-110-109.8-110zM464 256c0 43.1-34.9 78.2-77.9 78.2s-77.9-35.1-77.9-78.2 34.9-78.2 77.9-78.2S464 212.9 464 256zm-338.1 78.2C83 334.2 48 299.1 48 256s34.9-78.2 77.9-78.2 77.9 35.1 77.9 78.2-34.9 78.2-77.9 78.2z" fill="currentColor"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M386.2 146h-.1c-60.6 0-109.8 49.2-109.8 110.1 0 30.5 12.3 58 32.3 77.9H203.5c19.9-19.9 32.3-47.5 32.3-77.9 0-60.8-49.2-110.1-109.8-110.1h-.1-.1C65.2 146 16 195.2 16 256s49.2 110 109.8 110h260.4c60.6 0 109.8-49.2 109.8-110s-49.2-110-109.8-110zM464 256c0 43.1-34.9 78.2-77.9 78.2s-77.9-35.1-77.9-78.2 34.9-78.2 77.9-78.2S464 212.9 464 256zm-338.1 78.2C83 334.2 48 299.1 48 256s34.9-78.2 77.9-78.2 77.9 35.1 77.9 78.2-34.9 78.2-77.9 78.2z" fill="currentColor"/></svg>
</template>

CSS

.icon-ios-recording {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M386.2%20146h-.1c-60.6%200-109.8%2049.2-109.8%20110.1%200%2030.5%2012.3%2058%2032.3%2077.9H203.5c19.9-19.9%2032.3-47.5%2032.3-77.9%200-60.8-49.2-110.1-109.8-110.1h-.1-.1C65.2%20146%2016%20195.2%2016%20256s49.2%20110%20109.8%20110h260.4c60.6%200%20109.8-49.2%20109.8-110s-49.2-110-109.8-110zM464%20256c0%2043.1-34.9%2078.2-77.9%2078.2s-77.9-35.1-77.9-78.2%2034.9-78.2%2077.9-78.2S464%20212.9%20464%20256zm-338.1%2078.2C83%20334.2%2048%20299.1%2048%20256s34.9-78.2%2077.9-78.2%2077.9%2035.1%2077.9%2078.2-34.9%2078.2-77.9%2078.2z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M386.2%20146h-.1c-60.6%200-109.8%2049.2-109.8%20110.1%200%2030.5%2012.3%2058%2032.3%2077.9H203.5c19.9-19.9%2032.3-47.5%2032.3-77.9%200-60.8-49.2-110.1-109.8-110.1h-.1-.1C65.2%20146%2016%20195.2%2016%20256s49.2%20110%20109.8%20110h260.4c60.6%200%20109.8-49.2%20109.8-110s-49.2-110-109.8-110zM464%20256c0%2043.1-34.9%2078.2-77.9%2078.2s-77.9-35.1-77.9-78.2%2034.9-78.2%2077.9-78.2S464%20212.9%20464%20256zm-338.1%2078.2C83%20334.2%2048%20299.1%2048%20256s34.9-78.2%2077.9-78.2%2077.9%2035.1%2077.9%2078.2-34.9%2078.2-77.9%2078.2z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/ios-recording.svg?color=%231a73e8&size=48

ios recording icon

1 other variant in IonIcons

Related icons in IonIcons

Use the ios recording icon

SVG

React

Vue

CSS