Camera icon
Used in camera scenarios. The Camera icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Camera 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 { Camera24Regular, Camera24Filled } from "@fluentui/react-icons";
export function Example() {
return <Camera24Regular aria-label="Camera" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_camera_24_regular.svg" width="24" height="24" alt="Camera"> 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="M13.9247 2.50391C14.7225 2.50391 15.4607 2.92638 15.8647 3.61428L16.6793 5.00086H18.75C20.5449 5.00086 22 6.45593 22 8.25086V17.7509C22 19.5458 20.5449 21.0009 18.75 21.0009H5.25C3.45507 21.0009 2 19.5458 2 17.7509V8.25086C2 6.45593 3.45507 5.00086 5.25 5.00086H7.33042L8.205 3.57656C8.61425 2.91006 9.34026 2.50391 10.1224 2.50391H13.9247ZM13.9247 4.00391H10.1224C9.89892 4.00391 9.6892 4.10337 9.54793 4.2717L9.48325 4.36146L8.38913 6.14331C8.25271 6.36547 8.01071 6.50086 7.75 6.50086H5.25C4.2835 6.50086 3.5 7.28436 3.5 8.25086V17.7509C3.5 18.7174 4.2835 19.5009 5.25 19.5009H18.75C19.7165 19.5009 20.5 18.7174 20.5 17.7509V8.25086C20.5 7.28436 19.7165 6.50086 18.75 6.50086H16.25C15.9841 6.50086 15.738 6.36003 15.6033 6.13073L14.5714 4.37403C14.4367 4.14473 14.1906 4.00391 13.9247 4.00391ZM12 8.00086C14.4853 8.00086 16.5 10.0156 16.5 12.5009C16.5 14.9861 14.4853 17.0009 12 17.0009C9.51472 17.0009 7.5 14.9861 7.5 12.5009C7.5 10.0156 9.51472 8.00086 12 8.00086ZM12 9.50086C10.3431 9.50086 9 10.844 9 12.5009C9 14.1577 10.3431 15.5009 12 15.5009C13.6569 15.5009 15 14.1577 15 12.5009C15 10.844 13.6569 9.50086 12 9.50086Z" 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/camera_24_regular.svg";Details
| Name | Camera |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_camera_24_regular.svg |
| Filled file | ic_fluent_camera_24_filled.svg |
| React components | Camera24Regular, Camera24Filled |
| License | MIT (© Microsoft Corporation) |