Layer Diagonal Add icon
Used to represent a workspace of tabs within browser. The Layer Diagonal Add 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 Layer Diagonal 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 { LayerDiagonalAdd24Regular, LayerDiagonalAdd24Filled } from "@fluentui/react-icons";
export function Example() {
return <LayerDiagonalAdd24Regular aria-label="Layer Diagonal Add" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_layer_diagonal_add_24_regular.svg" width="24" height="24" alt="Layer Diagonal 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="M12.5 4.25194C12.5 3.73196 11.9837 3.36976 11.4948 3.54669L4.65454 6.02188C3.96161 6.27262 3.5 6.93056 3.5 7.66746V13.7491C3.5 14.2691 4.01625 14.6313 4.5052 14.4544L5 14.2753V15.8705C3.5378 16.388 2 15.3035 2 13.7491V7.66746C2 6.29894 2.85728 5.07704 4.14414 4.61138L10.9844 2.1362C12.4512 1.60541 14 2.69202 14 4.25194V4.42895L12.5 4.97174V4.25194ZM16.5 7.25194C16.5 6.73196 15.9837 6.36976 15.4948 6.54669L8.32467 9.14124C7.82972 9.32034 7.5 9.7903 7.5 10.3167V16.7491C7.5 17.2691 8.01625 17.6313 8.5052 17.4544L9 17.2753V18.8705C7.5378 19.388 6 18.3035 6 16.7491V10.3167C6 9.15868 6.72539 8.12477 7.81427 7.73075L14.9844 5.1362C16.4512 4.60541 18 5.69202 18 7.25194V7.42895L16.5 7.97174V7.25194ZM19.4948 9.54667C19.9837 9.36975 20.5 9.73195 20.5 10.2519V11.3135C21.0335 11.4858 21.5368 11.7253 22 12.0218V10.2519C22 8.692 20.4512 7.60539 18.9844 8.13618L11.4844 10.8501C10.5935 11.1725 10 12.0184 10 12.9658V19.7491C10 21.309 11.5488 22.3956 13.0156 21.8649L13.5231 21.6812C13.1928 21.2884 12.9081 20.856 12.6773 20.3921L12.5052 20.4544C12.0163 20.6313 11.5 20.2691 11.5 19.7491V12.9658C11.5 12.65 11.6978 12.368 11.9948 12.2606L19.4948 9.54667ZM24 17.5C24 14.4624 21.5376 12 18.5 12C15.4624 12 13 14.4624 13 17.5C13 20.5376 15.4624 23 18.5 23C21.5376 23 24 20.5376 24 17.5ZM19.0006 18L19.0011 20.5035C19.0011 20.7797 18.7773 21.0035 18.5011 21.0035C18.225 21.0035 18.0011 20.7797 18.0011 20.5035L18.0006 18H15.4956C15.2197 18 14.9961 17.7762 14.9961 17.5C14.9961 17.2239 15.2197 17 15.4956 17H18.0005L18 14.4993C18 14.2231 18.2239 13.9993 18.5 13.9993C18.7761 13.9993 19 14.2231 19 14.4993L19.0005 17H21.4966C21.7725 17 21.9961 17.2239 21.9961 17.5C21.9961 17.7762 21.7725 18 21.4966 18H19.0006Z" 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/layer_diagonal_add_24_regular.svg";Details
| Name | Layer Diagonal Add |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_layer_diagonal_add_24_regular.svg |
| Filled file | ic_fluent_layer_diagonal_add_24_filled.svg |
| React components | LayerDiagonalAdd24Regular, LayerDiagonalAdd24Filled |
| License | MIT (© Microsoft Corporation) |