iOS Arrow icon
Used in specific iOS devices UI. The iOS Arrow 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 iOS Arrow 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 { IosArrow24Regular, IosArrow24Filled } from "@fluentui/react-icons";
export function Example() {
return <IosArrow24Regular aria-label="iOS Arrow" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_ios_arrow_24_regular.svg" width="24" height="24" alt="iOS Arrow"> 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="M4.29642 12L12.7875 3.27302C13.0764 2.97614 13.0699 2.50131 12.773 2.21246C12.4761 1.9236 12.0013 1.93011 11.7125 2.22698L2.71246 11.477C2.42918 11.7681 2.42918 12.2319 2.71246 12.523L11.7125 21.773C12.0013 22.0699 12.4761 22.0764 12.773 21.7875C13.0699 21.4987 13.0764 21.0239 12.7875 20.727L4.29642 12Z" 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/ios_arrow_24_regular.svg";Details
| Name | iOS Arrow |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_ios_arrow_24_regular.svg |
| Filled file | ic_fluent_ios_arrow_24_filled.svg |
| React components | IosArrow24Regular, IosArrow24Filled |
| License | MIT (© Microsoft Corporation) |