refactor: custom icon sizing

[RubenSmn]

trafficstars

Description

Will improve the resizing on mobile, first it was a fixed 28px now it is 75% of the initial(desktop) value. All can be overridden with the sx prop, a good example is in the ImpactSection.

Reason for the change is that there is no need to set a different height and width since the svg will be rendered as a square anyway.

• add size prop to CustomIcon component
• update all components to use new size prop
• updated some icon sizes to improve ux

Type of change

• [x] Enhancement

Checklist:

• [x] I have performed a self-review of my own code
• [x] My changes generate no new warnings

[RubenSmn]

@dadiorchen we should consider this. It will greatly improve the UI of our icons, especially on mobile.

[dadiorchen]

@RubenSmn okay, I will download this and run it to check locally, can you fix the conflict for me?

[RubenSmn]

@dadiorchen done!

[dadiorchen]

@RubenSmn do you think this is still valid or we can close it?

[RubenSmn]

@dadiorchen I think it still could be valuable since it standardizes the size of a icon. For example on the top page: https://beta-map.treetracker.org/top the tree icons on the leader board have a incorrect size.