Camera Add icon

Use the Camera Add 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 { CameraAdd24Regular, CameraAdd24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CameraAdd24Regular aria-label="Camera Add" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_camera_add_24_regular.svg" width="24" height="24" alt="Camera Add">

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="M17.5 12.0009C20.5376 12.0009 23 14.4633 23 17.5009C23 20.5384 20.5376 23.0009 17.5 23.0009C14.4624 23.0009 12 20.5384 12 17.5009C12 14.4633 14.4624 12.0009 17.5 12.0009ZM17.5 14.0001L17.4101 14.0081C17.206 14.0452 17.0451 14.2061 17.0081 14.4102L17 14.5001L16.9996 17.0001L14.4977 17.0009L14.4078 17.0089C14.2037 17.046 14.0427 17.2069 14.0057 17.411L13.9977 17.5009L14.0057 17.5907C14.0427 17.7948 14.2037 17.9558 14.4078 17.9928L14.4977 18.0009L17.0007 18.0001L17.0011 20.5043L17.0092 20.5942C17.0462 20.7983 17.2071 20.9592 17.4112 20.9963L17.5011 21.0043L17.591 20.9963C17.7951 20.9592 17.956 20.7983 17.9931 20.5942L18.0011 20.5043L18.0007 18.0001L20.5046 18.0009L20.5944 17.9928C20.7985 17.9558 20.9595 17.7948 20.9965 17.5907L21.0046 17.5009L20.9965 17.411C20.9595 17.2069 20.7985 17.046 20.5944 17.0089L20.5046 17.0009L17.9996 17.0001L18 14.5001L17.9919 14.4102C17.9549 14.2061 17.794 14.0452 17.5899 14.0081L17.5 14.0001ZM13.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.25086L22.0008 12.8112C21.5566 12.3848 21.052 12.0209 20.5011 11.7336L20.5 8.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.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.5009L11.3133 19.5003C11.4857 20.034 11.7252 20.5376 12.0219 21.0011L5.25 21.0009C3.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.9247ZM12 8.00086C14.0018 8.00086 15.6983 9.3079 16.2826 11.1151C15.7821 11.2095 15.3022 11.3616 14.8497 11.5639C14.4571 10.3658 13.3296 9.50086 12 9.50086C10.3431 9.50086 9 10.844 9 12.5009C9 13.9302 9.99964 15.1261 11.338 15.4276C11.1806 15.8943 11.0748 16.3864 11.0278 16.8955C9.00995 16.4513 7.5 14.6524 7.5 12.5009C7.5 10.0156 9.51472 8.00086 12 8.00086Z" 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_add_24_regular.svg";

Details

Keywords

imagephotographypicture