Album Add icon

Use the Album 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 { AlbumAdd24Regular, AlbumAdd24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_album_add_24_regular.svg" width="24" height="24" alt="Album 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="M2 6C2 4.89543 2.89543 4 4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H12.5018C12.6996 19.5258 12.8428 19.0232 12.9236 18.5H20C20.2761 18.5 20.5 18.2761 20.5 18V6C20.5 5.72386 20.2761 5.5 20 5.5H7.5V11.0764C7.17403 11.0261 6.84007 11 6.5 11C6.33176 11 6.16502 11.0064 6 11.0189V5.5H4C3.72386 5.5 3.5 5.72386 3.5 6V11.7322C2.94898 12.0194 2.44427 12.3832 2 12.8096V6ZM12 7C10.8954 7 10 7.89543 10 9V10C10 11.1046 10.8954 12 12 12H16C17.1046 12 18 11.1046 18 10V9C18 7.89543 17.1046 7 16 7H12ZM16 8.5C16.2761 8.5 16.5 8.72386 16.5 9V10C16.5 10.2761 16.2761 10.5 16 10.5H12C11.7239 10.5 11.5 10.2761 11.5 10V9C11.5 8.72386 11.7239 8.5 12 8.5H16ZM6.5 12C9.53757 12 12 14.4624 12 17.5C12 20.5376 9.53757 23 6.5 23C3.46243 23 1 20.5376 1 17.5C1 14.4624 3.46243 12 6.5 12ZM7.00111 20.5035L7.00065 18H9.49659C9.77246 18 9.99609 17.7762 9.99609 17.5C9.99609 17.2239 9.77246 17 9.49659 17H7.00046L7 14.4993C7 14.2231 6.77614 13.9993 6.5 13.9993C6.22386 13.9993 6 14.2231 6 14.4993L6.00046 17H3.4956C3.21973 17 2.99609 17.2239 2.99609 17.5C2.99609 17.7762 3.21973 18 3.4956 18H6.00065L6.00111 20.5035C6.00111 20.7797 6.22497 21.0035 6.50111 21.0035C6.77725 21.0035 7.00111 20.7797 7.00111 20.5035Z" 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/album_add_24_regular.svg";

Details

Keywords

photobookpicturesimage