camera icon
camera-24 from Fluent UI System Color Icons by Microsoft Corporation · 24 · MIT Free for personal and commercial use.
- Name
- camera-24
- Set
- Fluent UI System Color Icons
- Style
- 24
- Viewbox
- 24×24
- License
- MIT
2 other variants in Fluent UI System Color Icons
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 IconscameraFluent EmojicameraFluent Emoji FlatcameraFluent Emoji High ContrastcameraFirefox OS Emojicameracss.ggcameraHeroIconscameraHumbleiconscameraIconParkcameraIconPark Outline
Use the camera icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVG3kkNddaw1)" d="M2 8.25A3.25 3.25 0 0 1 5.25 5H7l1.332-1.998A2.25 2.25 0 0 1 10.204 2h3.592a2.25 2.25 0 0 1 1.872 1.002L17 5h1.75A3.25 3.25 0 0 1 22 8.25v9.5A3.25 3.25 0 0 1 18.75 21H5.25A3.25 3.25 0 0 1 2 17.75z"/><path fill="url(#SVGFONRRcMv1)" fill-opacity=".5" d="M2 8.25A3.25 3.25 0 0 1 5.25 5H7l1.332-1.998A2.25 2.25 0 0 1 10.204 2h3.592a2.25 2.25 0 0 1 1.872 1.002L17 5h1.75A3.25 3.25 0 0 1 22 8.25v9.5A3.25 3.25 0 0 1 18.75 21H5.25A3.25 3.25 0 0 1 2 17.75z"/><path fill="url(#SVGqYVADclA1)" fill-rule="evenodd" d="M12 17a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9" clip-rule="evenodd"/><path fill="url(#SVGtmmFleRw1)" d="M15 12.5a3 3 0 1 1-6 0a3 3 0 0 1 6 0"/><path fill="url(#SVGw6p2b1zH1)" d="M18.5 10a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"/><defs><radialGradient id="SVG3kkNddaw1" cx="0" cy="0" r="1" gradientTransform="rotate(41.108 -4.919 .133)scale(29.8616 62.1235)" gradientUnits="userSpaceOnUse"><stop stop-color="#f08af4"/><stop offset=".535" stop-color="#9c6cfe"/><stop offset="1" stop-color="#4e44db"/></radialGradient><radialGradient id="SVGFONRRcMv1" cx="0" cy="0" r="1" gradientTransform="matrix(.5 6.9091 -7.19332 .52057 14.5 14.09)" gradientUnits="userSpaceOnUse"><stop stop-color="#312a9a"/><stop offset="1" stop-color="#312a9a" stop-opacity="0"/></radialGradient><radialGradient id="SVGtmmFleRw1" cx="0" cy="0" r="1" gradientTransform="matrix(5.5 6.5 -6.5 5.5 8 8)" gradientUnits="userSpaceOnUse"><stop offset=".243" stop-color="#3bd5ff"/><stop offset="1" stop-color="#2052cb"/></radialGradient><linearGradient id="SVGqYVADclA1" x1="9.193" x2="13.693" y1="8" y2="18.688" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#decbff"/></linearGradient><linearGradient id="SVGw6p2b1zH1" x1="17" x2="20" y1="7.75" y2="10" gradientUnits="userSpaceOnUse"><stop stop-color="#f08af4"/><stop offset="1" stop-color="#f462ab"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorCamera24(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVG3kkNddaw1)" d="M2 8.25A3.25 3.25 0 0 1 5.25 5H7l1.332-1.998A2.25 2.25 0 0 1 10.204 2h3.592a2.25 2.25 0 0 1 1.872 1.002L17 5h1.75A3.25 3.25 0 0 1 22 8.25v9.5A3.25 3.25 0 0 1 18.75 21H5.25A3.25 3.25 0 0 1 2 17.75z"/><path fill="url(#SVGFONRRcMv1)" fillOpacity=".5" d="M2 8.25A3.25 3.25 0 0 1 5.25 5H7l1.332-1.998A2.25 2.25 0 0 1 10.204 2h3.592a2.25 2.25 0 0 1 1.872 1.002L17 5h1.75A3.25 3.25 0 0 1 22 8.25v9.5A3.25 3.25 0 0 1 18.75 21H5.25A3.25 3.25 0 0 1 2 17.75z"/><path fill="url(#SVGqYVADclA1)" fillRule="evenodd" d="M12 17a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9" clipRule="evenodd"/><path fill="url(#SVGtmmFleRw1)" d="M15 12.5a3 3 0 1 1-6 0a3 3 0 0 1 6 0"/><path fill="url(#SVGw6p2b1zH1)" d="M18.5 10a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"/><defs><radialGradient id="SVG3kkNddaw1" cx="0" cy="0" r="1" gradientTransform="rotate(41.108 -4.919 .133)scale(29.8616 62.1235)" gradientUnits="userSpaceOnUse"><stop stopColor="#f08af4"/><stop offset=".535" stopColor="#9c6cfe"/><stop offset="1" stopColor="#4e44db"/></radialGradient><radialGradient id="SVGFONRRcMv1" cx="0" cy="0" r="1" gradientTransform="matrix(.5 6.9091 -7.19332 .52057 14.5 14.09)" gradientUnits="userSpaceOnUse"><stop stopColor="#312a9a"/><stop offset="1" stopColor="#312a9a" stopOpacity="0"/></radialGradient><radialGradient id="SVGtmmFleRw1" cx="0" cy="0" r="1" gradientTransform="matrix(5.5 6.5 -6.5 5.5 8 8)" gradientUnits="userSpaceOnUse"><stop offset=".243" stopColor="#3bd5ff"/><stop offset="1" stopColor="#2052cb"/></radialGradient><linearGradient id="SVGqYVADclA1" x1="9.193" x2="13.693" y1="8" y2="18.688" gradientUnits="userSpaceOnUse"><stop stopColor="#fff"/><stop offset="1" stopColor="#decbff"/></linearGradient><linearGradient id="SVGw6p2b1zH1" x1="17" x2="20" y1="7.75" y2="10" gradientUnits="userSpaceOnUse"><stop stopColor="#f08af4"/><stop offset="1" stopColor="#f462ab"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVG3kkNddaw1)" d="M2 8.25A3.25 3.25 0 0 1 5.25 5H7l1.332-1.998A2.25 2.25 0 0 1 10.204 2h3.592a2.25 2.25 0 0 1 1.872 1.002L17 5h1.75A3.25 3.25 0 0 1 22 8.25v9.5A3.25 3.25 0 0 1 18.75 21H5.25A3.25 3.25 0 0 1 2 17.75z"/><path fill="url(#SVGFONRRcMv1)" fill-opacity=".5" d="M2 8.25A3.25 3.25 0 0 1 5.25 5H7l1.332-1.998A2.25 2.25 0 0 1 10.204 2h3.592a2.25 2.25 0 0 1 1.872 1.002L17 5h1.75A3.25 3.25 0 0 1 22 8.25v9.5A3.25 3.25 0 0 1 18.75 21H5.25A3.25 3.25 0 0 1 2 17.75z"/><path fill="url(#SVGqYVADclA1)" fill-rule="evenodd" d="M12 17a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9" clip-rule="evenodd"/><path fill="url(#SVGtmmFleRw1)" d="M15 12.5a3 3 0 1 1-6 0a3 3 0 0 1 6 0"/><path fill="url(#SVGw6p2b1zH1)" d="M18.5 10a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"/><defs><radialGradient id="SVG3kkNddaw1" cx="0" cy="0" r="1" gradientTransform="rotate(41.108 -4.919 .133)scale(29.8616 62.1235)" gradientUnits="userSpaceOnUse"><stop stop-color="#f08af4"/><stop offset=".535" stop-color="#9c6cfe"/><stop offset="1" stop-color="#4e44db"/></radialGradient><radialGradient id="SVGFONRRcMv1" cx="0" cy="0" r="1" gradientTransform="matrix(.5 6.9091 -7.19332 .52057 14.5 14.09)" gradientUnits="userSpaceOnUse"><stop stop-color="#312a9a"/><stop offset="1" stop-color="#312a9a" stop-opacity="0"/></radialGradient><radialGradient id="SVGtmmFleRw1" cx="0" cy="0" r="1" gradientTransform="matrix(5.5 6.5 -6.5 5.5 8 8)" gradientUnits="userSpaceOnUse"><stop offset=".243" stop-color="#3bd5ff"/><stop offset="1" stop-color="#2052cb"/></radialGradient><linearGradient id="SVGqYVADclA1" x1="9.193" x2="13.693" y1="8" y2="18.688" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#decbff"/></linearGradient><linearGradient id="SVGw6p2b1zH1" x1="17" x2="20" y1="7.75" y2="10" gradientUnits="userSpaceOnUse"><stop stop-color="#f08af4"/><stop offset="1" stop-color="#f462ab"/></linearGradient></defs></g></svg> </template>
CSS
.icon-camera-24 {
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%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVG3kkNddaw1)%22%20d%3D%22M2%208.25A3.25%203.25%200%200%201%205.25%205H7l1.332-1.998A2.25%202.25%200%200%201%2010.204%202h3.592a2.25%202.25%200%200%201%201.872%201.002L17%205h1.75A3.25%203.25%200%200%201%2022%208.25v9.5A3.25%203.25%200%200%201%2018.75%2021H5.25A3.25%203.25%200%200%201%202%2017.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGFONRRcMv1)%22%20fill-opacity%3D%22.5%22%20d%3D%22M2%208.25A3.25%203.25%200%200%201%205.25%205H7l1.332-1.998A2.25%202.25%200%200%201%2010.204%202h3.592a2.25%202.25%200%200%201%201.872%201.002L17%205h1.75A3.25%203.25%200%200%201%2022%208.25v9.5A3.25%203.25%200%200%201%2018.75%2021H5.25A3.25%203.25%200%200%201%202%2017.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGqYVADclA1)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12%2017a4.5%204.5%200%201%200%200-9a4.5%204.5%200%200%200%200%209%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGtmmFleRw1)%22%20d%3D%22M15%2012.5a3%203%200%201%201-6%200a3%203%200%200%201%206%200%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGw6p2b1zH1)%22%20d%3D%22M18.5%2010a1.5%201.5%200%201%200%200-3a1.5%201.5%200%200%200%200%203%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVG3kkNddaw1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(41.108%20-4.919%20.133)scale(29.8616%2062.1235)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23f08af4%22%2F%3E%3Cstop%20offset%3D%22.535%22%20stop-color%3D%22%239c6cfe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234e44db%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGFONRRcMv1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(.5%206.9091%20-7.19332%20.52057%2014.5%2014.09)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23312a9a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23312a9a%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGtmmFleRw1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(5.5%206.5%20-6.5%205.5%208%208)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.243%22%20stop-color%3D%22%233bd5ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232052cb%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22SVGqYVADclA1%22%20x1%3D%229.193%22%20x2%3D%2213.693%22%20y1%3D%228%22%20y2%3D%2218.688%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23decbff%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGw6p2b1zH1%22%20x1%3D%2217%22%20x2%3D%2220%22%20y1%3D%227.75%22%20y2%3D%2210%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23f08af4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f462ab%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%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%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVG3kkNddaw1)%22%20d%3D%22M2%208.25A3.25%203.25%200%200%201%205.25%205H7l1.332-1.998A2.25%202.25%200%200%201%2010.204%202h3.592a2.25%202.25%200%200%201%201.872%201.002L17%205h1.75A3.25%203.25%200%200%201%2022%208.25v9.5A3.25%203.25%200%200%201%2018.75%2021H5.25A3.25%203.25%200%200%201%202%2017.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGFONRRcMv1)%22%20fill-opacity%3D%22.5%22%20d%3D%22M2%208.25A3.25%203.25%200%200%201%205.25%205H7l1.332-1.998A2.25%202.25%200%200%201%2010.204%202h3.592a2.25%202.25%200%200%201%201.872%201.002L17%205h1.75A3.25%203.25%200%200%201%2022%208.25v9.5A3.25%203.25%200%200%201%2018.75%2021H5.25A3.25%203.25%200%200%201%202%2017.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGqYVADclA1)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12%2017a4.5%204.5%200%201%200%200-9a4.5%204.5%200%200%200%200%209%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGtmmFleRw1)%22%20d%3D%22M15%2012.5a3%203%200%201%201-6%200a3%203%200%200%201%206%200%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGw6p2b1zH1)%22%20d%3D%22M18.5%2010a1.5%201.5%200%201%200%200-3a1.5%201.5%200%200%200%200%203%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVG3kkNddaw1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(41.108%20-4.919%20.133)scale(29.8616%2062.1235)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23f08af4%22%2F%3E%3Cstop%20offset%3D%22.535%22%20stop-color%3D%22%239c6cfe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234e44db%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGFONRRcMv1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(.5%206.9091%20-7.19332%20.52057%2014.5%2014.09)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23312a9a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23312a9a%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGtmmFleRw1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(5.5%206.5%20-6.5%205.5%208%208)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.243%22%20stop-color%3D%22%233bd5ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232052cb%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22SVGqYVADclA1%22%20x1%3D%229.193%22%20x2%3D%2213.693%22%20y1%3D%228%22%20y2%3D%2218.688%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23decbff%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGw6p2b1zH1%22%20x1%3D%2217%22%20x2%3D%2220%22%20y1%3D%227.75%22%20y2%3D%2210%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23f08af4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f462ab%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/camera-24.svg?color=%231a73e8&size=48
