Icons — arXiv Design System

The set

Selected icons currently in use. The name under each is the file name.

arrow-down
arrow-left
arrow-up
calendar
check
chevron-down
chevron-left
chevron-right
circle-alert
circle-check
circle-question-mark
circle-user
circle-x
clipboard
code
copy
download
external-link
eye
file-text
info
link
list
maximize-2
menu
message-square
minimize-2
paperclip
pencil
plus
refresh-cw
search
send
shield-check
tex
trash
triangle-alert
x
zoom-in
zoom-out

Using an icon

The icon inherits the text colour around it, and it is hidden from assistive technology, so the control or text beside it conveys the meaning.

Relevant code

<button class="ds-btn" type="button">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">…</svg>
    Download PDF
  </button>

aria-hidden="true": On every icon. The icon never conveys meaning on its own: a button gets its name from its label or an .is-sr-only span, and an icon beside text is decoration.
stroke="currentColor": The icon takes the colour of the text around it, in every state and both themes.
No width or height: The component that holds the icon sizes it in em, so it follows the control’s own type size. A bare icon in text takes the line’s height.

Accessibility essentials

Color is inherited. If not otherwise specified, the icon inherits the text colour around it. Using the Design System and not overriding colors ensures accessible contrast in both light and dark modes.
Icons are decorative, not informative. In our markup icons are hidden from assistive technology by default, so the text beside it or control it is inside of must convey the meaning.
Automated sizing. Do not set explicit width or height. Icons are sized by the text or component it is inside of. This allows content to reflow naturally and supports assistive magnification tools.

Adding an icon

From the Lucide set. Find the file in the Lucide release named in docs/icons/VERSION, keep its name unchanged, and put it in docs/icons/. This page will update automatically the next time it is built.
Drawing a custom icon. Follow these specs: A 24-unit grid, a 2-unit stroke, round caps and joins, no fills, no ids or styles. Export an svg from Illustrator and add it to the icon folder. You know it is working when it cannot be told apart from the original Lucide set.
Rebuilding this page. Then run python3 verification/gen-icons.py. The icon list will update itself based on the folder contents.