camera icon
camera from Prime Icons by PrimeTek · Regular · MIT Free for personal and commercial use.
- Name
- camera
- Set
- Prime Icons
- Style
- Regular
- Viewbox
- 24×24
- License
- MIT
The same icon in other sets
cameraAkar Iconscamera-filledAnt Design IconscameraBootstrap IconscameraBoxIcons v2cameraBoxIcons v2 SolidcameraCarboncameraEmoji One (Colored)cameraElement Pluscamera-fillEva IconscameraFramework7 IconscameraFont Awesome 6 SolidcameraFont Awesome RegularcameraFont Awesome SolidcameraFeather Iconscamera-16-filledFluent UI System Iconscamera-16Fluent UI System Color IconscameraFluent EmojicameraFluent Emoji FlatcameraFluent Emoji High ContrastcameraFirefox OS Emojicameracss.ggcameraHeroIconscameraHumbleiconscameraIconPark
Use the camera icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18 19.25H6a2.75 2.75 0 0 1-2.75-2.75v-6A2.75 2.75 0 0 1 6 7.75h.6L7.78 6a2.76 2.76 0 0 1 2.29-1.22h3.86A2.76 2.76 0 0 1 16.22 6l1.18 1.75h.6a2.75 2.75 0 0 1 2.75 2.75v6A2.75 2.75 0 0 1 18 19.25m-12-10a1.25 1.25 0 0 0-1.25 1.25v6A1.25 1.25 0 0 0 6 17.75h12a1.25 1.25 0 0 0 1.25-1.25v-6A1.25 1.25 0 0 0 18 9.25h-1a.75.75 0 0 1-.62-.33L15 6.81a1.24 1.24 0 0 0-1-.56h-3.93a1.24 1.24 0 0 0-1 .56L7.62 8.92a.75.75 0 0 1-.62.33Z"/><path fill="currentColor" d="M12 16.25A3.25 3.25 0 1 1 15.25 13A3.26 3.26 0 0 1 12 16.25m0-5A1.75 1.75 0 1 0 13.75 13A1.76 1.76 0 0 0 12 11.25"/></svg>
React
import type { SVGProps } from "react";
export function PrimeCamera(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="M18 19.25H6a2.75 2.75 0 0 1-2.75-2.75v-6A2.75 2.75 0 0 1 6 7.75h.6L7.78 6a2.76 2.76 0 0 1 2.29-1.22h3.86A2.76 2.76 0 0 1 16.22 6l1.18 1.75h.6a2.75 2.75 0 0 1 2.75 2.75v6A2.75 2.75 0 0 1 18 19.25m-12-10a1.25 1.25 0 0 0-1.25 1.25v6A1.25 1.25 0 0 0 6 17.75h12a1.25 1.25 0 0 0 1.25-1.25v-6A1.25 1.25 0 0 0 18 9.25h-1a.75.75 0 0 1-.62-.33L15 6.81a1.24 1.24 0 0 0-1-.56h-3.93a1.24 1.24 0 0 0-1 .56L7.62 8.92a.75.75 0 0 1-.62.33Z"/><path fill="currentColor" d="M12 16.25A3.25 3.25 0 1 1 15.25 13A3.26 3.26 0 0 1 12 16.25m0-5A1.75 1.75 0 1 0 13.75 13A1.76 1.76 0 0 0 12 11.25"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18 19.25H6a2.75 2.75 0 0 1-2.75-2.75v-6A2.75 2.75 0 0 1 6 7.75h.6L7.78 6a2.76 2.76 0 0 1 2.29-1.22h3.86A2.76 2.76 0 0 1 16.22 6l1.18 1.75h.6a2.75 2.75 0 0 1 2.75 2.75v6A2.75 2.75 0 0 1 18 19.25m-12-10a1.25 1.25 0 0 0-1.25 1.25v6A1.25 1.25 0 0 0 6 17.75h12a1.25 1.25 0 0 0 1.25-1.25v-6A1.25 1.25 0 0 0 18 9.25h-1a.75.75 0 0 1-.62-.33L15 6.81a1.24 1.24 0 0 0-1-.56h-3.93a1.24 1.24 0 0 0-1 .56L7.62 8.92a.75.75 0 0 1-.62.33Z"/><path fill="currentColor" d="M12 16.25A3.25 3.25 0 1 1 15.25 13A3.26 3.26 0 0 1 12 16.25m0-5A1.75 1.75 0 1 0 13.75 13A1.76 1.76 0 0 0 12 11.25"/></svg> </template>
CSS
.icon-camera {
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%22M18%2019.25H6a2.75%202.75%200%200%201-2.75-2.75v-6A2.75%202.75%200%200%201%206%207.75h.6L7.78%206a2.76%202.76%200%200%201%202.29-1.22h3.86A2.76%202.76%200%200%201%2016.22%206l1.18%201.75h.6a2.75%202.75%200%200%201%202.75%202.75v6A2.75%202.75%200%200%201%2018%2019.25m-12-10a1.25%201.25%200%200%200-1.25%201.25v6A1.25%201.25%200%200%200%206%2017.75h12a1.25%201.25%200%200%200%201.25-1.25v-6A1.25%201.25%200%200%200%2018%209.25h-1a.75.75%200%200%201-.62-.33L15%206.81a1.24%201.24%200%200%200-1-.56h-3.93a1.24%201.24%200%200%200-1%20.56L7.62%208.92a.75.75%200%200%201-.62.33Z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%2016.25A3.25%203.25%200%201%201%2015.25%2013A3.26%203.26%200%200%201%2012%2016.25m0-5A1.75%201.75%200%201%200%2013.75%2013A1.76%201.76%200%200%200%2012%2011.25%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%22M18%2019.25H6a2.75%202.75%200%200%201-2.75-2.75v-6A2.75%202.75%200%200%201%206%207.75h.6L7.78%206a2.76%202.76%200%200%201%202.29-1.22h3.86A2.76%202.76%200%200%201%2016.22%206l1.18%201.75h.6a2.75%202.75%200%200%201%202.75%202.75v6A2.75%202.75%200%200%201%2018%2019.25m-12-10a1.25%201.25%200%200%200-1.25%201.25v6A1.25%201.25%200%200%200%206%2017.75h12a1.25%201.25%200%200%200%201.25-1.25v-6A1.25%201.25%200%200%200%2018%209.25h-1a.75.75%200%200%201-.62-.33L15%206.81a1.24%201.24%200%200%200-1-.56h-3.93a1.24%201.24%200%200%200-1%20.56L7.62%208.92a.75.75%200%200%201-.62.33Z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%2016.25A3.25%203.25%200%201%201%2015.25%2013A3.26%203.26%200%200%201%2012%2016.25m0-5A1.75%201.75%200%201%200%2013.75%2013A1.76%201.76%200%200%200%2012%2011.25%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/prime/camera.svg?color=%231a73e8&size=48
