Icon contribution

Before you begin, be sure to search the icon library to see if your proposed icon is currently represented.

Guidelines

Icons should be a clear, recognizable metaphor for what they’re supposed to represent and fit well within the icon library as a whole. They are used in a range of sizes within the system, so they should be simple enough to retain fidelity at smaller sizes but not so simple that they lack personality at a larger scale.

Consider the following additional guidelines when preparing your icons for submission:

• Avoid creating icons that are redundant with existing design system icons.
• Set your gridlines to display every 1px and make sure pixel snapping is turned on.
• Each icon must be centered within a 24px by 24px constraint.
• Icon constraints should have 2px padding all around. In other words, the actual artwork should not be any larger than 20px by 20px.
• Strokes should be 1.5px.
• Arrowheads should be V-shaped with a 90-degree angle. Do not use triangles.
• Use rounded corners when possible.
• Set line segments to use rounded stroke caps.
• Combine and subtract simple shapes rather than drawing them with the pen tool.
• Repurpose existing shapes from other icons where possible to improve consistency.
• Limit repeating elements (such as lines of text in a document) to the absolute minimum needed to demonstrate the concept.
• Use outline style when creating all icons. Filled versions may also be supplied in addition to the outline variant as needed.
• Name icons with common nouns where possible (ex. pencil, checkmark, etc.).
• Proper nouns can be used on rare occasions when applicable (ex. zelle, xperience, etc.).
• Do not include any prefixes such as icon- for the icon name.

Icons may be submitted using any vector-based program, including Figma, Sketch, or Adobe Illustrator. Exported SVGs are preferred; shared links to your files (such as within Figma) are okay as long as we can readily review and extract the artwork. However, in order for an icon to be considered for addition to the library, both the original layered and production-ready artwork must be supplied.

When preparing the production-ready artwork, be sure to follow these guidelines:

• Expand all strokes and paths.
• Remove unnecessary anchor points.
• Flatten any overlapping paths or shapes.
• Remove any inner shapes created from editing paths.

Approval process

All icons that are to be included within the Jack Henry design system are reviewed by the design system team to ensure consistency and relevance to the entire organization. This process begins by creating a GitHub issue. We are currently unable to accept icon submissions other than via a GitHub issue created in the iconography repo. Review and approval timelines are contingent upon the number of icons submitted and how closely they follow the guidelines.

If changes are required, a member of the design system team will respond with recommendations via the original issue.

Once approved, the Figma and code libraries will be updated with the artwork.

Submission

Icons may be submitted by creating a GitHub issue. You may submit a single icon or a batch of icons for consideration.

Reach out to the design system team using the #org-design-system Slack channel if you have any questions or need additional assistance.