airbyte
airbyte copied to clipboard
airbytehq
🎉 Added new icons and updated old
What
#13491 - Update logos to optimize UX
How
Added new icons and updated old
Hi! I'm sorry to say that but I think all the icons need to be updated... The new icons seems to be pixel logo converted to vectors, so the quality is really not good.
Also, all those icons have different sizes and proportions, the result will not be homogeneous. I created a figma file with all the connectors logo, integrated in a square area, with right margins and proportions, this are the icons to use. Please let me know if some icons are missing, or if you need help to export this icons. (please DO NOT modify those icons in Figma as this are components used in all our product design files.)
Here is the Figma file with the icons to use: https://www.figma.com/file/gMNRYVJav25pdsoxAyW7Qp/00_01_WEB-APP-LIBRARIES?node-id=2%3A675
@Upmitt @Phlair Unfortunately I didn't have permission to figma. Could you help me with that?
This logos need to be updated (bad quality or wrong padding) - This logos were not in my Figma file, I'll let you know as soon as I update Figma (will try to do that tomorrow morning)
Other logos seems ok :)
:
@Upmitt I don't see anything in the icon figma for the following connectors, which currently have icons that don't seem to match the padding that you have used in the updated icons above. Do we want to update these as well? If so, should we do that now or do it in a separate PR once the icons are ready?
| Connector name | Current icon |
|---|---|
| Orbit | https://github.com/airbytehq/airbyte/blob/f8273c5a6e06dfe00374da973850d3470e59d090/airbyte-config/init/src/main/resources/icons/orbit.svg |
| Cassandra | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/cassandra.svg |
| Chartmogul | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/chartmogul.svg |
| Close | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/close.svg |
| Cloudflare R2 | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/cloudflare-r2.svg |
| Commerce Tools | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/commercetools.svg |
| Delighted | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/delighted.svg |
| Dynamo DB | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/dynamodb.svg |
| Elasticsearch | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/elasticsearch.svg |
| Exchange Rates API | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/exchangeratesapi.svg |
| Firestore | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/firestore.svg |
| Flexport | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/flexport.svg |
| Freshsales | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/freshsales.svg |
| Glassfrog | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/glassfrog.svg |
| Google Directory | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/googledirectory.svg |
| Google Workspace | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/googleworkpace.svg |
| Harness | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/harness.svg |
| Jenkins | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/jenkins.svg |
| Kinesis | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/kinesis.svg |
| Lemlist | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/lemlist.svg |
| Linnworks | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/linnworks.svg |
| MQTT | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/mqtt.svg |
| My Hours | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/my-hours.svg |
| OneSignal | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/onesignal.svg |
| Paystack | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/paystack.svg |
| PersistIq | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/persistiq.svg |
| Primetric | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/primetric.svg |
| Pulsar | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/pulsar.svg |
| Qualaroo | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/qualaroo.svg |
| Scylla | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/scylla.svg |
| Short.io | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/short.svg |
| Sqlite | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/sqlite.svg |
| Strava | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/strava.svg |
| Streamr | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/streamr.svg |
| Timely | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/timely.svg |
| VictorOps | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/victorops.svg |
| Zenefits | https://github.com/airbytehq/airbyte/blob/master/airbyte-config/init/src/main/resources/icons/zenefits.svg |
@Upmitt Also, the padding around the SVGs makes them look a little small to me in the UI with the current size of the icon:
Is this desired? Or should we change increase/adjust size of the icon container at all to make these slightly larger?
AWESOME!! Thank you @lmossman !! I'll create the missing icons :) regarding the size, I use those square Icons in all my designs, for example in the dropdowns: https://www.figma.com/file/gMNRYVJav25pdsoxAyW7Qp/00_01_WEB-APP-LIBRARIES?node-id=1406%3A2576 - I think you can reduce the space between icon and name, and increase the Icon size (34px in Figma) Thank you again !
Hey @YowanR Could you please help prioritize this PR for Airbyte review 😊
Adding to what Lake said here: A lot of the icons now have a margin around them in the SVG. This should not be done. @Upmitt You mentioend we can increase them in the UI, but this PR adds this marging inside the SVGs, so we can't really do that. In general the icon files should imho not have any unnecessary padding around the actual icon (except in one dimension to make it squared). If we have the padding in the icon files, we basically take away any possibility to change that quickly or adjust to it within the UI.
COuld we please make sure that all icons in this PR are properly trimmed so the icon is touching the border?
A note. A community member opened https://github.com/airbytehq/airbyte/pull/19346 which also corrects a lot of the squaring. I'd suggest we first merge the community PR, so we're not having that require too much more merge conflicts and then continue on this PR here, with the remaining icons.
We just merged https://github.com/airbytehq/airbyte/pull/19346. This PR should now be brought back with master and doesn't need to touch the icons, already fixed in that other PR.
@lazebnyi Yes I think we can close this PR. Nico is working on the full icon set, and we'd then open a new PR once we have the renewed icons.