Create Icon System for Component Library - UI

[kangina-tech]

Overview

Icons are used to communicate visual cues where language might be a hinderance. It is important to have an icon system that serves in the same way words do.

Background

This project is heavily reliant on the Atomic Design process. As explained by the HfLA Design System Guide for Designers, it is the simplest way to go through all the possible steps that are required for this component part.

As a point of start for this stickersheet, it is best to create the icon system based off of Hack for LA icons and let the other teams adjust them according to their needs.

You can also get information from the MUI website - Icon.

Action Items

Icon tray.

• Size
• Line Stroke
• Outline and Filled

Note: Be sure to use sizing that is up to standard with Accessibility Guidelines.

Resources/Instructions

Internship Project
Civic Tech Jobs
HfLA Website

[allthatyazz]

@fuzjan81 The previous DS team also put together an icon section that might be worthwhile to explore. Make sure to also explore the archive page that includes examples from other companies.

[fuzjan81]

Thank you this is very helpful.

…

On Wed, May 10, 2023, 6:18 PM Yasaman (Yas) Roostaeian < ***@***.***> wrote: @fuzjan81 <https://github.com/fuzjan81> The previous DS team also put together an icon section <#89 (comment)> that might be worthwhile to explore. Make sure to also explore the archive page that includes examples from other companies. [image: image] <https://user-images.githubusercontent.com/100178353/237547882-aa980635-1c4a-4962-a326-489b098ddb59.png> [image: image] <https://user-images.githubusercontent.com/100178353/237548087-0008d37f-d86c-42dd-a0c5-0c5053de1ffb.png> — Reply to this email directly, view it on GitHub <#505 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFQR2IPAPMWTB64SJ4HBQETXFQ45FANCNFSM6AAAAAAVOSST4E> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[fuzjan81]

@allthatyazz the link you had put under icon section just brings me back here. Is this in a figma file? Can you tell me where this is?