Cube Multiple icon
Used in 3D experience scenarios. The Cube Multiple 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 Cube Multiple 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 { CubeMultiple24Regular, CubeMultiple24Filled } from "@fluentui/react-icons";
export function Example() {
return <CubeMultiple24Regular aria-label="Cube Multiple" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_cube_multiple_24_regular.svg" width="24" height="24" alt="Cube Multiple"> 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="M10.5186 4.25082C11.4779 3.91639 12.5221 3.91639 13.4814 4.25082C13.5172 4.26257 13.5529 4.27476 13.5884 4.28738L19.5032 6.38618C19.8787 6.51941 20.2151 6.72229 20.5 6.97722V6.56209C20.5 5.71537 19.9668 4.96039 19.1688 4.67724L14.0065 2.84543C12.7085 2.38486 11.2915 2.38486 9.99354 2.84543L4.83118 4.67724C4.0332 4.96039 3.5 5.71537 3.5 6.56209V6.97722C3.78489 6.72229 4.12129 6.51941 4.49677 6.38618L10.4116 4.28738C10.4471 4.27476 10.4828 4.26257 10.5186 4.25082ZM6.44943 10.1112C6.58795 9.72081 7.01669 9.51664 7.40706 9.65516L12 11.2849L16.5929 9.65516C16.9833 9.51664 17.4121 9.72081 17.5506 10.1112C17.6891 10.5015 17.4849 10.9303 17.0946 11.0688L12.75 12.6104V17.3307C12.75 17.7449 12.4142 18.0807 12 18.0807C11.5858 18.0807 11.25 17.7449 11.25 17.3307V12.6104L6.90544 11.0688C6.51508 10.9303 6.31091 10.5015 6.44943 10.1112ZM10.746 5.22957C11.5572 4.94171 12.4428 4.94171 13.254 5.22957L19.1688 7.32836C19.9668 7.61152 20.5 8.36649 20.5 9.21322V17.4476C20.5 18.2943 19.9668 19.0493 19.1688 19.3324L13.254 21.4312C12.4428 21.7191 11.5572 21.7191 10.746 21.4312L4.83118 19.3324C4.0332 19.0493 3.5 18.2943 3.5 17.4476V9.21322C3.5 8.36649 4.0332 7.61152 4.83118 7.32836L10.746 5.22957ZM12.7524 6.64321C12.2657 6.47049 11.7343 6.47049 11.2476 6.64321L5.33279 8.742C5.1333 8.81279 5 9.00153 5 9.21322V17.4476C5 17.6593 5.1333 17.848 5.3328 17.9188L11.2476 20.0176C11.7343 20.1903 12.2657 20.1903 12.7524 20.0176L18.6672 17.9188C18.8667 17.848 19 17.6593 19 17.4476V9.21322C19 9.00154 18.8667 8.81279 18.6672 8.742L12.7524 6.64321Z" 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/cube_multiple_24_regular.svg";Details
| Name | Cube Multiple |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_cube_multiple_24_regular.svg |
| Filled file | ic_fluent_cube_multiple_24_filled.svg |
| React components | CubeMultiple24Regular, CubeMultiple24Filled |
| License | MIT (© Microsoft Corporation) |