Icons: standardize images

[justintemps]

Hi @inesdgomes, we finally fixed the icon rendering in the button and other places. However, while I was testing it, it seems like some of the icons have much different dimensions and thus render differently inside components that use them, like buttons.

Here are a few examples:

I added a table of all of the icons with the names and previews to that pacakge README which you can see here

I think the problem is that many of the icons have differing amounts of padding in their viewBoxes. The SVGs themselves are the same size, but there are varying amounts of empty space around the actual image inside the SVGs that cause the icons to appear as if they're different sizes.

I think the solution here is to do the same thing we did with the logos, recreating them one by one to make sure that they all have the same proportion.

[inesdgomes]

Hi @justintemps OK, will change the icons. Before I do that, does this make sense to you:

• All SVGs are 24:24px (no exceptions)
• Icons inside the SVGs are always centered
• Icons inside the SVGs are always either 16px wide or 16px tall, depending on the icon (this is what we did for the social media icons)
• Icons with very odd ratios may exceptionally be a bit taller or wider - this may be necessary for icons that are very long or tall, but will try to avoid the exceptions.

[justintemps]

• Hey @inesdgomes, I'm not sure why we'd want the SVG to be 24px but the image inside the SVG to only be 16px. They'll be much easier to work with if they go edge to edge.
• Yes, they should always be centered.

[justintemps]

We agreed that @inesdgomes would standardize the icons in Figma and then we'll figure out a way to export them to the package

[beatrizmartinmartins]

@inesdgomes let's talk about a few of these icons, because I think it doesn't make sense to have a few of them and we can deprecate them and use similar ones. Like for example, why do we have so many types of chevrons? we should use only one to make sure the experience looks cohesive. Right now, from my point of view, its like we are using two different sets of icons.

Also, a few of the icons have border-radius on some corners and others don't. Shouldn't we use the same style for all of them?

[inesdgomes]

Hi @beatrizmartinmartins As discussed, please do streamline the style of the icons and remove duplicates and icons that are not used anywhere. Thanks

[beatrizmartinmartins]

Please check the updates here All of the icons have been updated to the latest style and we don't have duplicates anymore @inesdgomes

[inesdgomes]

@beatrizmartinmartins Much better, thanks! I remember you pointed out that some icons also had different styles, for example the home icon has rounded corners. Please could you also review that and then list here which icons were changed so developers can replace them? Thanks

[beatrizmartinmartins]

@inesdgomes All those icons are review and I just changed them. Honestly, all icons have changed. I changed every single one of them. Adjusted the sizings, the paddings, made sure that every single icon looked nice and applied it to templates to make more reviews. The list of final icons is the following:

• Add
• Close
• Minus
• Caret Right
• Caret Left
• Caret Down
• Caret Up
• Arrow Left
• Arrow Right
• Arrow Down
• Arrow Up
• Arrow Go To Right
• Arrow Go To Left
• Home
• Arrow Sort
• Chevron Down
• Chevron Up
• Chevron Right
• Chevron Left
• Download
• Calendar
• Search
• Check
• Copyright
• Send
• Mail
• Launch
• Online
• Conference
• Dot Menu
• Notification Success
• Notification Error
• Notification Info
• Notification Info Outlined
• Notification Warning
• Burger
• Language
• Video Sound On
• Video Sound Off
• Settings
• Fullscreen
• Pause
• Play
• Statistics
• Social RSS
• Pin
• Social TikTok
• Social LinkedIn
• Social Facebook
• Social Twitter
• Social Instagram
• Social Flickr
• Social Youtube
• Upload

cc @justintemps

[inesdgomes]

Ok, cool! One final question: is there a reason for the right and left chevrons to be smaller than the other chevrons? Wondering how that's going to look in the search results' pagination? Scroll to the bottom here: https://www.ilo.org/search?search_api_fulltext=&ilo_date%5Bmin%5D=&ilo_date%5Bmax%5D=&sort_by=search_api_relevance&f%5B0%5D=language%3Aen

[beatrizmartinmartins]

@inesdgomes so basically left and right chevrons are used to navigate through content or pagesm basically an action, while the top and bottom chevrons is more of a dropdown kind of chevron where it shows something up, not really a navigation. Although if you'd like we can make them the same size and have them all look the same

[beatrizmartinmartins]

Review and sizing aligned @inesdgomes

[inesdgomes]

Thanks @beatrizmartinmartins Could you just check the chevrons in the templates? Something doesn't look quite right in Search Results pages.

[beatrizmartinmartins]

@inesdgomes checked and changed on the templates!