Fluent Icons

Arrow Autofit Width icon

Used for adjusting content size. Dotted versions are used for autofit. Contains height & width variants. The Arrow Autofit Width icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 2 sizes from 20 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_arrow_autofit_width_24_regular.svg

Arrow Autofit Width icon in React

npm install @fluentui/react-icons

import { ArrowAutofitWidth24Regular } from "@fluentui/react-icons";

export function Example() {
  return <ArrowAutofitWidth24Regular aria-label="Arrow Autofit Width" />;
}

Arrow Autofit Width icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/arrow_autofit_width_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/arrow_autofit_width_24_regular.svg" width="24" height="24" alt="Arrow Autofit Width">

Arrow Autofit Width icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.ArrowAutofitWidth())" />

Arrow Autofit Width icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.arrow_autofit_width_24_regular)

Arrow Autofit Width icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF8CE;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF8CE;" FontSize="24" />

Arrow Autofit Width icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_arrow_autofit_width_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f8ce";
  font-size: 24px;
}

Arrow Autofit Width icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_arrow_autofit_width_24_regular" />

// Kotlin
R.drawable.ic_fluent_arrow_autofit_width_24_regular

Arrow Autofit Width icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .arrowAutofitWidth24Regular)

Arrow Autofit Width icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

Use the Arrow Autofit Width 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 { ArrowAutofitWidth24Regular, ArrowAutofitWidth24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowAutofitWidth24Regular aria-label="Arrow Autofit Width" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_autofit_width_24_regular.svg" width="24" height="24" alt="Arrow Autofit Width">

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="M5.71973 13.7197C6.01262 13.4269 6.4874 13.4269 6.78027 13.7197C7.07306 14.0126 7.07308 14.4874 6.78027 14.7803L5.56055 16H9.25C9.66414 16.0001 10 16.3358 10 16.75C9.99998 17.1641 9.66413 17.4999 9.25 17.5H5.56055L6.78027 18.7197C7.07306 19.0126 7.07308 19.4874 6.78027 19.7803C6.48741 20.0731 6.01263 20.0731 5.71973 19.7803L3.21973 17.2803C3.07908 17.1396 3.00001 16.9489 3 16.75C3 16.5511 3.07907 16.3604 3.21973 16.2197L5.71973 13.7197ZM17.2197 13.7197C17.5126 13.4269 17.9874 13.4269 18.2803 13.7197L20.7803 16.2197L20.832 16.2764C21.0722 16.5709 21.0548 17.0057 20.7803 17.2803L18.2803 19.7803C17.9874 20.0731 17.5126 20.0731 17.2197 19.7803C16.9268 19.4874 16.9268 19.0126 17.2197 18.7197L18.4395 17.5H14.75C14.3358 17.5 14 17.1642 14 16.75C14 16.3358 14.3358 16 14.75 16H18.4395L17.2197 14.7803C16.9268 14.4874 16.9268 14.0126 17.2197 13.7197ZM17.75 4C18.9926 4.00008 20 5.00741 20 6.25V11.25C20 11.6641 19.6641 11.9999 19.25 12C18.8358 12 18.5 11.6642 18.5 11.25V6.25C18.5 5.83584 18.1641 5.50008 17.75 5.5H6.25C5.83579 5.5 5.5 5.83579 5.5 6.25V11.25C5.49998 11.6641 5.16413 11.9999 4.75 12C4.3358 12 4.00002 11.6642 4 11.25V6.25C4 5.00736 5.00736 4 6.25 4H17.75Z" fill="currentColor"/></svg>

Details

NameArrow Autofit Width
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_arrow_autofit_width_24_regular.svg
Filled fileic_fluent_arrow_autofit_width_24_filled.svg
React (Regular)ArrowAutofitWidth20Regular, ArrowAutofitWidth24Regular
React (Filled)ArrowAutofitWidth20Filled, ArrowAutofitWidth24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

widthheightresizefill

Related icons

Arrow Autofit Width DottedArrow Autofit ContentArrow Autofit DownArrow Autofit HeightArrow Autofit Height DottedArrow Autofit UpArrow Autofit Height InArrow Bidirectional Left RightFull Screen MaximizeFull Screen MinimizeMaximizeArrow Bidirectional Up Down