Update group 1 icons - Financial Products

[jimmynotjim]

Update the first group of icons and export for print and web. Ensure the file names match the names used in the Design Manual, the paths are grouped into a top-level group, and everything is converted to outlines.

[jimmynotjim]

We're going to split this group in half because it's so large and most likely to have unexpected issues with the standard.

@designlanguage @Dnpizarro could you post here with a list of what icons each of you are updating?

[designlanguage]

[designlanguage]

Here are the icons I've worked on. They haven't been fully outlined yet as I want to make sure there aren't any other tweaks to our guidelines.

Overall, the intent behind our sizing grid is to give every icon a similar visual prominence, so one doesn't feel much larger than another. This grid doesn't strictly apply when you have oddly-shaped icons, so I've noted below where there are exceptions. Here's an example:

Name	Symbol	In circle	Notes
Credit-card
Building-credit			Broke the grid for visual balance.
Prepaid-cards			New dollar symbol that works better at small sizes.
Contract
Getting-credit-card			This uneven shape breaks the grid to keep it visually balanced.
Money			Added a circle to the dollar bill symbol.
Money-transfer			Broke the grid here.
Quick-Cash
Debt			This will need a new concept after MVP is complete.
Mortgage			We should avoid using text if possible, but this concept needs it. We'll revisit this after MVP. This also breaks the grid.
Buying-car
Debt-collection			Spaces between fingers are a little thinner than our guidelines. This may have to be an exception.
Complaint			New exclamation point here that better matches the other symbols. Breaks the grid due to the triangle at the bottom.

[Dnpizarro]

Below is my half of the financial products icons. Also, @designlanguage you might want to post the web icons you've worked on in issue #574.

Name	Symbol	In circle	Notes
Credit-report
Bank_account
Loan
Payday-loan			Lines in the circle version had to be manual adjusted to create a balanced visual match to the symbol
Paying-college			It was easier to just draw a newer version. We can change this once we get some feedback.
Retirement

[designlanguage]

@Dnpizarro - thanks, I moved my group 2 set to the other page.

I like these. My only comment is that there shouldn't be hard edges on the bank (similar to how we changes the house).

[Dnpizarro]

Below are the notes from our working session earlier today:

Prepaid: Center circle icon, and make coin larger. Contract: Make the top of pen more rounded. Getting credit card: Center the circle icon. Money Transfer: Reconsider a lower stroke weight, 35pt=symbol, 30pt=circle Bank account: Round the edges on both symbol and circle version Loan: Check stroke weight Payday-loan: This will be redrawn at a later sprint. Paying for college: Bottom part too long and looks like paceman. Also, the negative space on the symbol is too big, make 50pt stroke. Retirement: Make tail smaller and curve the ear shape.

[Dnpizarro]

The updated full set for the Financial Product Icons is below. @jimmynotjim @Scotchester @designlanguage

Name	Symbol	In circle	Notes
Credit-card
Building-credit
Prepaid-cards			Made the coin in the circle larger and centered the icon
Contract			Made the tip of the pen 60pt for the symbol and 50pt in the circle version
Getting-credit-card
Money			Dollar line weight for symbol is 50pt and 30pt for circle
Money-transfer			Dollar line weight for symbol is 40pt and 30pt for circle
Quick-Cash
Debt
Mortgage
Buying-car
Debt-collection
Complaint			We'll need to test the fidelity on the exclamation mark
Credit-report			corrected the rounded edges on the circle to 20pt
Bank_account
Loan
Payday-loan
Paying-college			Reworked the bottom edge to be rounded and changed the stroke weight between the cap and bottom part to 50pt
Retirement			Made the tail smaller and added a curve to the ear