Arrow Actions Icons for Angular

56 icons · 6 styles each · @rchernando/solar-icons/arrow-actions

The Arrow Actions set collects 56 icons — 4.5% of the 1,246 icons in the library, which makes it the 5th largest of the 37 categories. Every glyph is drawn on a 24x24 grid and exported in 6 style variants, so the set accounts for roughly 336 icon definitions on its own.

These are icons for actions expressed as motion — undo, refresh, transfer, sort. You will normally place them in toolbars, data tables, sync indicators and file transfer dialogs, and they are the first set dashboards and admin panels where every row has an action tends to pull in. Icons such as Arrow To Down Left, Arrow To Down Right, Circle Bottom Down and Circle Bottom Up cover the obvious cases; further in you will find Arrow To Down Left, Download Twice Square, Logout and Minimize Square, which handle the states people forget to design for.

All 56 Arrow Actions icons

arrow-to-down-leftarrow-to-down-rightcircle-bottom-downcircle-bottom-upcircle-top-downcircle-top-updownloaddownload-minimalisticdownload-squaredownload-twice-squareexitexportforwardforward2importloginlogin2login3logoutlogout2logout3maximizemaximize-squaremaximize-square-minimalisticmaximize-square2maximize-square3minimizeminimize-squareminimize-square-minimalisticminimize-square2minimize-square3recive-squarerecive-twice-squarereorderreplyreply2scalescreen-sharesend-squaresend-twice-squaresquare-bottom-downsquare-bottom-upsquare-top-downsquare-top-upundo-leftundo-left-roundundo-left-round-squareundo-left-squareundo-rightundo-right-roundundo-right-round-squareundo-right-squareuploadupload-minimalisticupload-squareupload-twice-square

Style variants in the Arrow Actions set

Each of the 56 icons ships as 6 separate exports: Bold, Bold Duotone, Linear, Outline, Broken and Line Duotone. Linear is the safe default for arrow actions in a dense layout; Bold reads better at small sizes and on coloured surfaces; the duotone pair adds a second opacity layer when you want depth without introducing another colour token.

bold
bold-duotone
linear
outline
broken
line-duotone

Installing the Arrow Actions icons

Import from the "@rchernando/solar-icons/arrow-actions" entry point rather than the package root — that is what keeps the other 36 categories out of your bundle. Register the icons you need with provideSolarIcons, either once in the application config or inside the providers array of the route that uses them, and render <solar-icon> with the icon name. The SVG is inlined, so there is no runtime fetch and no flash of missing icon.

bash
npm i @rchernando/solar-icons
typescript
import { ArrowToDownLeftBold, ArrowToDownRightBold, CircleBottomDownBold } from '@rchernando/solar-icons/arrow-actions';
html
<solar-icon name="arrow-to-down-left" iconStyle="bold" size="24px" />
<solar-icon name="arrow-to-down-right" iconStyle="bold" size="24px" />
<solar-icon name="circle-bottom-down" iconStyle="bold" size="24px" />

Arrow Actions icons FAQ

How many arrow actions icons are there?
56 unique icons, each in 6 styles, for 336 definitions in the arrow-actions entry point.
Are the Arrow Actions icons free to use?
Yes. @rchernando/solar-icons is published on npm under an open licence and the arrow-actions set is included in the package.
Can I import only one arrow actions icon?
Yes — import the single export you need from "@rchernando/solar-icons/arrow-actions". Anything you do not import is tree-shaken away.

Other icon categories

Sets that are commonly used next to Arrow Actions: Astronomy (32), Bulding Infrastructure (7), Arrow (67) and Weather (36).

37 categories, 1,246 icons. Search the whole library or read the usage patterns.