I am a junior product designer (previously a frontend dev) at a startup so I still have a lot to learn. I'm the sole designer working on a SAAS after multiple other designers have worked on it. I'm in the process of setting up a design system and strategy to clean up all the legacy component designs.
At the moment we use the native browser select component , but we also have some features where we use a custom select/dropdown component. This component is used when the selectable options include more than just a label (e.g.: an image, extra details about the option like a price or users where we show the name and email address).
Currently both of those components look very similar. The main difference is the icon we use (besides of course the custom dropdown menu that gets shown when you click the custom select component)
Native select:
Custom select:
So my question is: does it make sense for these two components to use different icons? Or should they use the same icon?
On one hand I feel like they are both select/dropdown components so it would make sense to use the same icon. On the other hand since one shows the browsers native dropdown menu and the other one shows a custom dropdown menu maybe it makes sense to use a different icon.
Even if the user doesn't actively notice it, maybe they subconsciously know what to expect (native menu vs custom menu) Or maybe it really doesn't matter at all?
