Refresh: Standardize icon usage

[stephaniehobson]

Different approaches have been taken with the icons for different components and we should standardize. This should mean moving away from changing icon colours in the CSS and towards including SVGs included on the page with the fill or stroke set to match currentColor.

Things to consider:

• under 24px we need to use icons that do not have the pixel cut out effect. Those variants are available in this Google Drive.
• icons are used in the launchpad, springboard, gallery, pencil banner, header, and footer.
• in the strip of 4 pictos on the about page the icons are large enough for the pixel cut out version
• where do we store the icons?
• how do we include them?
• should they be edited to remove all padding? (so they can be left or top aligned) I imagine that will break sizing so maybe not?

Goals:

• icons have consistent file names
• icons have consistent folder structure
• icons are included in jinja templates in a standardized and predictable way
  • referencing the icon files so if updates are needed they are only made in one place
• icons change colour as needed when included on pages (button hover effects, dark theme components, and eventually dark mode)

[alexgibson]

Reminder that we have the picture() helper that can serve light/dark mode icon images without the need for inlining and using custom CSS styling.

Avoiding in-line images where possible circumvents CSP issues, and also offers improved caching and lazy loading provided by the browser.