New and Renamed HDS Icons

[abbybowman]

Feature name

Consistent naming scheme for HDS Core icons; add new ones

Feature area

Assets (fonts, icons, images)

Describe the idea

Add more icons to HDS Core (see comments for proposals).

Update the existing HDS Core icon names to be:

• Unique and meaningful on their own, without needing the context of a parent folder
  • Ex: ✅ hds-icons/file-image.svg and ✅ ../tag-image.svg vs. ❌ hds-icons/File/image.svg and ❌ ../Tag/image.svg);
  • Already done in PR v0.3.0 - Added palettes and refactored scss, icons, and gulpfile #2
• Descriptive of intended use if the icon is reserved or strongly recommended for certain use cases
  • Ex: ✅ error vs. ❌ exclamation, ✅ close vs. ❌ xmark, ✅ settings vs. ❌ cog
  • This may be a category of use cases (✅ tag-* vs. ❌ circle-* for the icon pattern used for content types across sites)
• Descriptive of visual appearance if the icon is flexible enough to apply to a wide range of use cases
  • Ex: ✅ tag-star vs. ❌ tag-feature, ✅ tag-person vs. ❌ tag-bio
  • These icons need to be readily adaptable across a wide range of NASA sites, and we need to remove or references to specific NASA.gov usage when we don't expect that to be reused on other sites
  • During implementation, developers should still give icon buttons their site-specific context via aria-label on the button element, but there should be no need to rename the icon .svg itself
• Consistent with USWDS/Material names for the same/similar icons, if there's no reason not to be
  • Ex: ✅ tag-person to match USWDS 'person' icon vs. ❌ tag-bio or ❌ tag-profile

See initial list of proposed new icons and renamings in the comments below, and feel free to propose others!

Use case / user story

As a designer or developer using HDS, I want to be able to quickly understand what HDS icons are (and/or what they're generally used for, if prescribed) from their file names. I want to be able to easily apply HDS icons to my own site's context and content types without having to reference the HDS documentation constantly.

Primary audience

All of the above

Is this already in the HDS Figma library?

🟡 Partially — some elements exist but not complete

Figma reference

https://www.figma.com/design/cmR3rb3ZkeAIx2fBuD2OvT/HDS-Icons?node-id=1-6

Implementation maturity

✅ Production — already running on a live NASA site or project

Prior art details

Will share examples in discussion below, but many HDS-themed sites (like those maintained by the SMD WST team) are using other USWDS icons in production alongside HDS

Relationship to USWDS

Configures / themes an existing USWDS component

Potential breaking change?

Yes — would change existing APIs or output

Alternatives considered

In some cases, sites might be using a non-HDS icon for a use case where a good HDS alternative exists, or where text buttons (vs. icons) are recommended by HDS instead. We can discuss examples of those too in the convo under this thread.

Additional context

No response

Would you contribute to this?

Yes — I could submit a PR

[abbybowman]

New icons recommended for HDS Core

These would need an HDS design pass to ensure consistency with existing icons. Reviewed and supported by @jasontownsend.

🖼️	Proposed HDS name	Source	Similar to	Notes
	camera	USWDS photo_camera	WST camera	Seen in the wild as button to take a screenshot within a NASA web app, which is a good action-oriented use case not met by any existing HDS Core icons
	clock	USWDS schedule	WST clock	Interested in seeing an example in the wild but seems widely useful with no existing alternative in HDS Core
	cloud	USWDS cloud	WST solid-cloud	Interested in seeing an example in the wild but seems widely useful with no existing alternative in HDS Core (recommend adopting solid version only, not outline)
	content-add	Material playlist_add		Used in original Figma designs for NASA+; can be used for any web apps where users maintain a list of favorites, a playlist, or other types of editable content
	content-check	Material playlist_add_check		See above
	content-edit	Material edit_note		See above
	content-play	Material playlist_play		See above
	content-remove	Material playlist_remove		See above
	copy	USWDS content_copy,	WST copy	Implemented in prod on NASA+ today; wide use cases
	copy-link	USWDS link	WST copy-link	For use as a button to copy a URL/link specifically (vs. the generic copy); should not be used to indicate links, as HDS Core does that with arrow-line-diagonal and arrow-line right
	data	WST data	USWDS insights	Larger version of the icon inside tag-data
	globe	USWDS language	WST globe	Used on Earth.gov homepage ("Earth Theme"); don't recommend using for language switchers (per original HDS specs), but has wide range of other use cases
	thumb-up	USWDS thumb_up_alt		Used in original Figma designs for NASA+; can be used for user feedback, favoriting, etc.
	thumb-down	USWDS thumb_down_alt		See above
	warning	WST solid-warning	USWDS warning	Interested in seeing an example in the wild but seems useful as a higher severity than the existing HDS Core error (recommend adopting solid version only, not outline)

[abbybowman]

Existing icons recommended for renaming

Pre-1.0, recommend updating these icon names for consistency and ease of use outside the NASA.gov context. Reviewed and supported by @jasontownsend.

🖼️	Proposed new name	Old name	Rationale
	notification	Old: subscribe	Consistent with tag-notification and USWDS notifications
	tag-edit	Old: tag-activity	Consistent with USWDS edit and descriptive of visual appearance (vs. narrow/NASA.gov-specific use case)
	tag-bookmark	Old: tag-article	Consistent with USWDS bookmark and descriptive of visual appearance
	tag-person	Old: tag-bio	Consistent with USWDS person and descriptive of visual appearance
	tag-comment	Old: tag-blog	Consistent with USWDS comment and descriptive of intended use
	tag-reference	Old: tag-encyclopedia	Descriptive of intended use
	tag-star	Old: tag-feature	Consistent with USWDS star and descriptive of visual appearance
	tag-folder	Old: tag-file	Consistent with USWDS folder and descriptive of visual appearance
	tag-graph	Old: tag-infographic	Descriptive of visual appearance
	tag-announcement	Old: tag-media-advisory	Descriptive of intended use
	tag-document	Old: tag-press-release	Descriptive of intended use
	tag-repeat	Old: tag-previously-aired	Descriptive of intended use
	tag-audio	Old: tag-sound	Descriptive of intended use
	tag-mail	Old: tag-subscribe	Consistent with USWDS mail and descriptive of visual appearance
	tag-play	Old: tag-video	Descriptive of visual appearance

[abbybowman]

Renamed buttons shipped in 0.6.0