webcam icon

webcam from Pixelarticons by Gerrit Halfmann · Regular · MIT Free for personal and commercial use.

Name: webcam
Set: Pixelarticons
Style: Regular
Viewbox: 24×24
License: MIT

The same icon in other sets

webcamBootstrap Icons webcamBoxIcons v2 webcamBoxIcons v2 Solid webcamcss.gg webcamHuge Icons webcamIconPark webcamIconPark Outline webcamIconPark Solid webcamIconPark TwoTone webcamLucide webcamMaterial Design Icons webcamMyna UI Icons webcamPhosphor webcam-fillRemix Icon webcam-boldSolar webcamUnicons

Use the webcam icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20h16v-2h2v4H2v-4h2zm2-2H4v-2h2zm10 0H8v-2h8zm4 0h-2v-2h2zM8 16H6v-2h2zm10 0h-2v-2h2zM6 14H4V6h2zm8-6h2v4h-2v2h-4v-2H8V8h2v2h2V8h-2V6h4zm6 6h-2V6h2zM8 6H6V4h2zm10 0h-2V4h2zm-2-2H8V2h8z"/></svg>

React

import type { SVGProps } from "react";

export function PixelarticonsWebcam(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20h16v-2h2v4H2v-4h2zm2-2H4v-2h2zm10 0H8v-2h8zm4 0h-2v-2h2zM8 16H6v-2h2zm10 0h-2v-2h2zM6 14H4V6h2zm8-6h2v4h-2v2h-4v-2H8V8h2v2h2V8h-2V6h4zm6 6h-2V6h2zM8 6H6V4h2zm10 0h-2V4h2zm-2-2H8V2h8z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20h16v-2h2v4H2v-4h2zm2-2H4v-2h2zm10 0H8v-2h8zm4 0h-2v-2h2zM8 16H6v-2h2zm10 0h-2v-2h2zM6 14H4V6h2zm8-6h2v4h-2v2h-4v-2H8V8h2v2h2V8h-2V6h4zm6 6h-2V6h2zM8 6H6V4h2zm10 0h-2V4h2zm-2-2H8V2h8z"/></svg>
</template>

CSS

.icon-webcam {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4%2020h16v-2h2v4H2v-4h2zm2-2H4v-2h2zm10%200H8v-2h8zm4%200h-2v-2h2zM8%2016H6v-2h2zm10%200h-2v-2h2zM6%2014H4V6h2zm8-6h2v4h-2v2h-4v-2H8V8h2v2h2V8h-2V6h4zm6%206h-2V6h2zM8%206H6V4h2zm10%200h-2V4h2zm-2-2H8V2h8z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4%2020h16v-2h2v4H2v-4h2zm2-2H4v-2h2zm10%200H8v-2h8zm4%200h-2v-2h2zM8%2016H6v-2h2zm10%200h-2v-2h2zM6%2014H4V6h2zm8-6h2v4h-2v2h-4v-2H8V8h2v2h2V8h-2V6h4zm6%206h-2V6h2zM8%206H6V4h2zm10%200h-2V4h2zm-2-2H8V2h8z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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