Arrow Up Square Settings icon
Used in scenarios of uploading/updating settings. The Arrow Up Square Settings 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 Up Square Settings 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 { ArrowUpSquareSettings24Regular, ArrowUpSquareSettings24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowUpSquareSettings24Regular aria-label="Arrow Up Square Settings" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_up_square_settings_24_regular.svg" width="24" height="24" alt="Arrow Up Square Settings"> 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="M15.2782 14.9756C15.593 16.0659 14.9386 17.1993 13.837 17.4718L13.2528 17.6164C13.2079 17.9041 13.1846 18.1992 13.1846 18.5001C13.1846 18.8147 13.2101 19.1232 13.2592 19.4235L13.7986 19.5534C14.9111 19.8213 15.5725 20.9663 15.2486 22.0639L15.0623 22.6951C15.5014 23.0808 16.0019 23.3939 16.5464 23.6167L17.0397 23.098C17.8283 22.2687 19.1506 22.2689 19.9388 23.0985L20.4375 23.6232C20.9811 23.403 21.4811 23.0928 21.9204 22.7103L21.7223 22.0244C21.4076 20.9342 22.062 19.8007 23.1635 19.5282L23.7472 19.3838C23.7922 19.0961 23.8155 18.8009 23.8155 18.5001C23.8155 18.1853 23.7899 17.8767 23.7409 17.5764L23.2019 17.4466C22.0894 17.1787 21.4281 16.0337 21.7519 14.9362L21.9381 14.3053C21.499 13.9196 20.9985 13.6064 20.4539 13.3835L19.9608 13.9021C19.1722 14.7313 17.85 14.7311 17.0617 13.9016L16.5629 13.3767C16.0193 13.5969 15.5194 13.9071 15.0801 14.2894L15.2782 14.9756ZM18.5 20.0001C17.6994 20.0001 17.0504 19.3285 17.0504 18.5001C17.0504 17.6716 17.6994 17.0001 18.5 17.0001C19.3007 17.0001 19.9497 17.6716 19.9497 18.5001C19.9497 19.3285 19.3007 20.0001 18.5 20.0001ZM6.25 21H12.4982C12.3004 20.5258 12.1572 20.0232 12.0764 19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V12.0764C20.0232 12.1572 20.5258 12.3004 21 12.4982V6.25C21 4.45507 19.5449 3 17.75 3H6.25C4.45507 3 3 4.45507 3 6.25V17.75C3 19.5449 4.45507 21 6.25 21ZM12 17C12.0617 17 12.1217 16.9925 12.1791 16.9785C12.3068 16.4458 12.5001 15.9387 12.75 15.466L12.7503 9.56027L15.4697 12.2796C15.6154 12.4254 15.8063 12.4986 15.9974 12.4993C16.157 12.4326 16.3199 12.3721 16.4857 12.3181L16.5303 12.2796C16.7966 12.0133 16.8208 11.5967 16.6029 11.3031L16.5303 11.2189L12.5295 7.21811C12.2632 6.95181 11.8465 6.92764 11.5529 7.14557L11.4687 7.21821L7.46875 11.2197C7.17591 11.5127 7.176 11.9876 7.46895 12.2804C7.73527 12.5466 8.15193 12.5707 8.4455 12.3528L8.52961 12.2802L11.2503 9.55827L11.25 16.25C11.25 16.6297 11.5322 16.9435 11.8982 16.9931L12 17Z" 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_up_square_settings_24_regular.svg";Details
| Name | Arrow Up Square Settings |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_up_square_settings_24_regular.svg |
| Filled file | ic_fluent_arrow_up_square_settings_24_filled.svg |
| React components | ArrowUpSquareSettings24Regular, ArrowUpSquareSettings24Filled |
| License | MIT (© Microsoft Corporation) |