Learn to easily add or change icons in our system.

Design

Is a new icon needed?

• Check the Icon Library to confirm that an icon matching the desired metaphor does not already exist.
• Consult with designers to see if there is a shared need for a new icon.

Design a new icon

All of our icons are stored in our shared Figma library. Designers with edit access in our Figma account can add/edit icons.

Please refer to Sprout's styling documentation for guidance on how to design your asset.

Stage a new icon

Add the new icon to the Staging page within the Icon Library Figma file. The purpose of this page is to house icons that require review before being formally added to the icon library. This page also includes a checklist for users to reference to ensure they have built an asset that follows Sprout's design standards.

Submit a request for review

Sprout's icon library styling consistency guidelines are still new. It is important for the UI Systems zone to help users ensure they are not accidentally introducing inconsistencies. To help with this, submit a review request to the #design-systems channel with the following information:

• Context - The feature requiring the new icon and the metaphor you wish to convey
  • This is for contextual knowledge as the UIS team reviews the icon.
• Deadline - If the project is time-sensitive, please include the date on which you need UIS review by

Naming conventions

• Use a hyphen “-” as the delimiter between words e.g. arrow-up.
• Use lowercase rather than UPPERCASE, camelCase, or PascalCase.
• Solid icons are named icon-name-solid.
• Outline icons are named icon-name-outline.
• Use descriptive names for icons (e.g., use heart rather than love, use paper-plane rather than publishing)

Review process

A UIS Product Manager creates a Jira ticket

The ticket is assigned to a UIS Product Designer to begin the review process.

Members of the UI Systems zone review the staged icon

• UIS Product Designers are responsible for:

  • Ensuring an existing asset that conveys the same metaphor does not exist
  • Ensuring the new asset follows Sprout's naming conventions (descriptive instead of prescriptive), branding, and styling.

• If the icon does not follow one or more of these guidelines:

  • The user is invited to UIS Office Hours where the UIS Product Designer will discuss the identified issues with the icon and ensure the user is clear on the next steps.
  • The user will then apply the updates to the staged icon and let the team know when the icon is ready for review again.
  • The UIS Product Designer will connect with the user if the icon fails review. They will work together to get the icon approved before proceeding to the next step.

The icon is approved

• A UIS Product Designer will move the icon from the Staging page to the Icons page within the Nectar Icons Figma file, ensuring the icon is added to the appropriate icon category (Sprout, General, External, etc)

• A UIS Product Designer will then apply a slice to the icon, ensuring the slice matches the icon name.

Release

Sync icons

• Once the icon is in Figma and the library has been published, the icon needs to be synced to seeds-icons. A GitHub workflow runs twice daily (10:30 am and 4:30 pm CT) that checks for new/updated icons in our Figma library. Once a change has been found, a pull request called "Sync icons from Figma" will automatically be created in the seeds-packets repo.
• If a user cannot wait for this scheduled automation, the script can be kicked off manually if necessary from GitHub Actions.
• When the workflow captures any updates or new icons, a pull request called "Sync icons from Figma" will automatically be created in the seeds repo.
• The pull request needs to be reviewed, approved, and merged by an engineer(s). Merging this pull request will integrate the new/changed icons into our icon library package.
• Once deployed, the icon will be available for engineers to leverage via @sproutsocial/seeds-icons

Here is an example of a past pull request for syncing icons between Figma and seeds-icons.

Release a new version of @sproutsocial/seeds-icons

Once the Figma sync PR is merged, a PR titled "Version Packages" will automatically be created in the seeds-packets repo. This PR must be merged in order for the new version of seeds-icons to be published to package registries. The description of the PR includes the new version number. The new version will be available within a few minutes of merging this PR.

Here is an example of a past Version Packages PR used to release seeds-icons.

Upgrade @sproutsocial/seeds-icons in your app's dependencies

In order to use the new icons in your app, you will need to update the version of @sproutsocial/seeds-icons specified in your application's dependencies to match the version number that was released. An update to @sproutsocial/racine is not necessary.