Layer icon

Use the Layer 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 { Layer24Regular, Layer24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Layer24Regular aria-label="Layer" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_layer_24_regular.svg" width="24" height="24" alt="Layer">

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="M20.0256 12.1922C19.8772 12.4296 19.6806 12.6332 19.4486 12.7899L13.3987 16.8736C12.5535 17.4441 11.4465 17.4441 10.6013 16.8736L4.55142 12.7899C3.79043 12.2762 3.49533 11.3306 3.77229 10.5003L10.6132 15.0598C11.4005 15.5847 12.4112 15.6175 13.2264 15.1582L13.3867 15.0598L20.2271 10.4998C20.4088 11.0459 20.3545 11.666 20.0256 12.1922ZM20.2271 13.7498C20.4088 14.2959 20.3545 14.916 20.0256 15.4422C19.8772 15.6796 19.6806 15.8832 19.4486 16.0399L13.3987 20.1236C12.5535 20.6941 11.4465 20.6941 10.6013 20.1236L4.55142 16.0399C3.79043 15.5262 3.49533 14.5806 3.77229 13.7503L10.6132 18.3098C11.4005 18.8347 12.4112 18.8675 13.2264 18.4082L13.3867 18.3098L20.2271 13.7498ZM13.3867 3.42476L19.7519 7.66821C20.2115 7.97456 20.3356 8.59543 20.0293 9.05496C19.956 9.16481 19.8618 9.25907 19.7519 9.33231L13.3867 13.5758C12.547 14.1356 11.453 14.1356 10.6132 13.5758L4.24807 9.33231C3.78854 9.02595 3.66437 8.40509 3.97072 7.94556C4.04396 7.8357 4.13822 7.74144 4.24807 7.66821L10.6132 3.42476C11.453 2.86492 12.547 2.86492 13.3867 3.42476ZM11.5608 4.60648L11.4453 4.67283L5.705 8.50026L11.4453 12.3277C11.7439 12.5267 12.1228 12.5488 12.4392 12.394L12.5547 12.3277L18.294 8.50026L12.5547 4.67283C12.2561 4.47378 11.8772 4.45166 11.5608 4.60648Z" 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_24_regular.svg";

Details

Keywords

stack3ddimension