Arrow Autofit Width Dotted icon
Used for adjusting content size. Dotted versions are used for autofit. Contains height & width variants. The Arrow Autofit Width Dotted 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 Arrow Autofit Width Dotted 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 { ArrowAutofitWidthDotted24Regular, ArrowAutofitWidthDotted24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowAutofitWidthDotted24Regular aria-label="Arrow Autofit Width Dotted" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_autofit_width_dotted_24_regular.svg" width="24" height="24" alt="Arrow Autofit Width Dotted"> 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="M6.78016 18.7198C7.07298 19.0126 7.07298 19.4874 6.78016 19.7803C6.48729 20.0732 6.01251 20.0731 5.71961 19.7803L3.21961 17.2803C3.07895 17.1396 2.99988 16.9489 2.99988 16.75C2.99988 16.5511 3.07895 16.3604 3.21961 16.2197L5.71961 13.7197C6.01251 13.4269 6.48729 13.4269 6.78016 13.7197C7.07298 14.0126 7.07298 14.4874 6.78016 14.7803L4.81043 16.75L6.78016 18.7198ZM19.9999 11.25C19.9999 11.6642 19.6641 12 19.2499 12C18.8357 12 18.4999 11.6642 18.4999 11.25V6.25C18.4999 5.83583 18.1641 5.50007 17.7499 5.5H6.24989C5.83567 5.5 5.49989 5.83579 5.49989 6.25V11.25C5.49989 11.6642 5.16404 12 4.74988 12C4.33567 12 3.99988 11.6642 3.99988 11.25V6.25C3.99988 5.00736 5.00724 4 6.24989 4H17.7499C18.9925 4.00006 19.9999 5.0074 19.9999 6.25V11.25ZM9.4999 16.75C9.4999 17.1642 9.16405 17.5 8.74989 17.5H7.74989C7.33568 17.5 6.99989 17.1642 6.99989 16.75C6.99989 16.3358 7.33568 16 7.74989 16H8.74989C9.16405 16.0001 9.4999 16.3358 9.4999 16.75ZM12.9999 16.75C12.9999 17.1642 12.6641 17.5 12.2499 17.5H11.7499C11.3357 17.5 10.9999 17.1642 10.9999 16.75C10.9999 16.3358 11.3357 16 11.7499 16H12.2499C12.6641 16.0001 12.9999 16.3358 12.9999 16.75ZM16.9999 16.75C16.9999 17.1642 16.6641 17.5 16.2499 17.5H15.2499C14.8357 17.5 14.4999 17.1642 14.4999 16.75C14.4999 16.3358 14.8357 16 15.2499 16H16.2499C16.6641 16.0001 16.9999 16.3358 16.9999 16.75ZM20.832 16.2764C21.0722 16.5709 21.0547 17.0057 20.7802 17.2803L18.2802 19.7803C17.9873 20.0732 17.5125 20.0731 17.2196 19.7803C16.9268 19.4874 16.9268 19.0126 17.2196 18.7198L19.1894 16.75L17.2196 14.7803C16.9268 14.4874 16.9268 14.0126 17.2196 13.7197C17.5125 13.4269 17.9873 13.4269 18.2802 13.7197L20.7802 16.2197L20.832 16.2764Z" 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/arrow_autofit_width_dotted_24_regular.svg";Details
| Name | Arrow Autofit Width Dotted |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_autofit_width_dotted_24_regular.svg |
| Filled file | ic_fluent_arrow_autofit_width_dotted_24_filled.svg |
| React components | ArrowAutofitWidthDotted24Regular, ArrowAutofitWidthDotted24Filled |
| License | MIT (© Microsoft Corporation) |