Cube Quick icon

Use the Cube Quick 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 { CubeQuick24Regular, CubeQuick24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CubeQuick24Regular aria-label="Cube Quick" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_cube_quick_24_regular.svg" width="24" height="24" alt="Cube Quick">

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="M16.2744 7.55377C16.4163 7.48208 16.5837 7.48208 16.7256 7.55377L20.2256 9.32291C20.3939 9.40799 20.5 9.58055 20.5 9.76915V14.2341C20.5 14.4227 20.3939 14.5952 20.2256 14.6803L16.7256 16.4494C16.5837 16.5211 16.4163 16.5211 16.2744 16.4494L12.7744 14.6803C12.6061 14.5952 12.5 14.4227 12.5 14.2341V9.76915C12.5 9.58055 12.6061 9.40799 12.7744 9.32291L16.2744 7.55377ZM17.4022 6.21507C16.8349 5.92831 16.1651 5.92831 15.5978 6.21507L12.0978 7.98421C11.4245 8.32454 11 9.01475 11 9.76915V14.2341C11 14.9885 11.4245 15.6787 12.0978 16.019L15.5978 17.7881C16.1651 18.0749 16.8349 18.0749 17.4022 17.7881L20.9022 16.019C21.5755 15.6787 22 14.9885 22 14.2341V9.76915C22 9.01475 21.5755 8.32453 20.9022 7.98421L17.4022 6.21507ZM4 7.74489C4 7.33068 4.33579 6.99489 4.75 6.99489H9.25C9.66421 6.99489 10 7.33068 10 7.74489C10 8.15911 9.66421 8.49489 9.25 8.49489H4.75C4.33579 8.49489 4 8.15911 4 7.74489ZM2 11.7449C2 11.3307 2.33579 10.9949 2.75 10.9949H7.25C7.66421 10.9949 8 11.3307 8 11.7449C8 12.1591 7.66421 12.4949 7.25 12.4949H2.75C2.33579 12.4949 2 12.1591 2 11.7449ZM4.75 14.9949C4.33579 14.9949 4 15.3307 4 15.7449C4 16.1591 4.33579 16.4949 4.75 16.4949H9.25C9.66421 16.4949 10 16.1591 10 15.7449C10 15.3307 9.66421 14.9949 9.25 14.9949H4.75ZM13.5816 10.4047C13.7694 10.0356 14.221 9.8886 14.5902 10.0765L16.5 11.0484L18.4098 10.0765C18.779 9.8886 19.2306 10.0356 19.4184 10.4047C19.6063 10.7739 19.4593 11.2254 19.0902 11.4133L17.25 12.3498V14.2523C17.25 14.6665 16.9142 15.0023 16.5 15.0023C16.0858 15.0023 15.75 14.6665 15.75 14.2523V12.3498L13.9098 11.4133C13.5407 11.2254 13.3937 10.7739 13.5816 10.4047Z" 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_quick_24_regular.svg";

Details

Keywords

3ddepthz-axisshippingmovementspeedlocation