Skip to content

Components / Icon

Icon

Icons are square elements that represent an available action to the user. Icons are imported from a single SVG file and included on the page as SVG elements.

SVG is a vector format, meaning the icons will scale without regard to display density of the device they’re being viewed on. This means we can support standard displays for most laptops, high-density Android displays, and Retina Apple displays without managing separate bitmap images. We can also adjust the fill of icons, allowing much easier customization.

A searchable list of icons is available on the iconography page.

Structure

Variations

Size

Default
Extra small
Small
Large
Extra large
Size Description
Default 24 px
Extra small 16 px
Small 18 px
Large 36 px
Extra large 60 px

Style

Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.

Inspect component

© 2021 Jack Henry & Associates, Inc. Trademark notice
Version 0.7.0. Last updated March 23, 2021.