Arrow Autofit Height Dotted icon
Used for adjusting content size. Dotted versions are used for autofit. Contains height & width variants. The Arrow Autofit Height 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 Height 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 { ArrowAutofitHeightDotted24Regular, ArrowAutofitHeightDotted24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowAutofitHeightDotted24Regular aria-label="Arrow Autofit Height Dotted" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_autofit_height_dotted_24_regular.svg" width="24" height="24" alt="Arrow Autofit Height 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="M18.7197 17.2197C19.0126 16.9269 19.4874 16.9269 19.7803 17.2197C20.0731 17.5126 20.0731 17.9874 19.7803 18.2803L17.2803 20.7803C17.1396 20.9209 16.9489 21 16.75 21C16.5511 21 16.3604 20.9209 16.2197 20.7803L13.7197 18.2803C13.4269 17.9874 13.4269 17.5126 13.7197 17.2197C14.0126 16.9269 14.4874 16.9269 14.7803 17.2197L16.75 19.1894L18.7197 17.2197ZM11.25 4C11.6642 4 11.9999 4.33584 12 4.75C12 5.16419 11.6642 5.5 11.25 5.5H6.25C5.83582 5.5 5.50006 5.83584 5.5 6.25V17.75C5.50003 18.1642 5.8358 18.5 6.25 18.5H11.25C11.6642 18.5 11.9999 18.8358 12 19.25C12 19.6642 11.6642 20 11.25 20H6.25C5.00737 20 4.00003 18.9926 4 17.75V6.25C4.00006 5.00741 5.0074 4 6.25 4H11.25ZM16.75 14.5C17.1642 14.5 17.4999 14.8358 17.5 15.25V16.25C17.5 16.6642 17.1642 17 16.75 17C16.3358 17 16 16.6642 16 16.25V15.25C16.0001 14.8358 16.3358 14.5 16.75 14.5ZM16.75 11C17.1642 11 17.4999 11.3358 17.5 11.75V12.25C17.5 12.6642 17.1642 13 16.75 13C16.3358 13 16 12.6642 16 12.25V11.75C16.0001 11.3358 16.3358 11 16.75 11ZM16.75 7C17.1642 7 17.4999 7.33584 17.5 7.75V8.75C17.5 9.16419 17.1642 9.5 16.75 9.5C16.3358 9.5 16 9.16419 16 8.75V7.75C16.0001 7.33584 16.3358 7 16.75 7ZM16.2764 3.16797C16.5709 2.92772 17.0057 2.94519 17.2803 3.21972L19.7803 5.71972C20.0731 6.0126 20.0731 6.48738 19.7803 6.78027C19.4874 7.07313 19.0126 7.07313 18.7197 6.78027L16.75 4.81054L14.7803 6.78027C14.4874 7.07313 14.0126 7.07313 13.7197 6.78027C13.4269 6.48738 13.4269 6.0126 13.7197 5.71972L16.2197 3.21972L16.2764 3.16797Z" 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_height_dotted_24_regular.svg";Details
| Name | Arrow Autofit Height Dotted |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_autofit_height_dotted_24_regular.svg |
| Filled file | ic_fluent_arrow_autofit_height_dotted_24_filled.svg |
| React components | ArrowAutofitHeightDotted24Regular, ArrowAutofitHeightDotted24Filled |
| License | MIT (© Microsoft Corporation) |