¿Cuál es el mejor enfoque al diseñar iconos de interfaz de usuario de sitio web/aplicación en Photoshop?

Como dice el título, me gustaría saber cuál es el mejor enfoque al insertar/usar un ícono al diseñar la interfaz de usuario del sitio web/aplicación. ¿Debo insertarlo como un "objeto inteligente", un ícono basado en fuentes o una máscara vectorial?

He mirado toneladas de sitios web en términos de diseño de interfaz de usuario y cuán nítidos/píxeles perfectos son sus diseños, principalmente con respecto al uso de íconos, ¡y lamentablemente creo que la mayoría de ellos están rasterizados! Aunque la mayoría usa SVG, todavía no son tan nítidos como cabría esperar y siempre tienden a tener bordes pixelados y borrosos.

Por ejemplo, echa un vistazo a esto;

¡Me he dado cuenta de que esto es cierto en muchos sitios y no solo en eBay! Esto es cierto independientemente de si usan iconos basados ​​en fuentes o iconos SVG.

A menudo me enfrento a este problema cuando comienzo un nuevo diseño en Photoshop y luego lo codifico. Por ejemplo, a veces encuentro que los objetos inteligentes son más nítidos que los íconos basados ​​en fuentes y, a veces, incluso las máscaras vectoriales. No sé qué causa exactamente este problema o por qué. Incluso si cambia el tamaño de ellos en Illustrator, todavía sucede y siempre termina NO encajando en el píxel correcto. Lo mismo ocurre con los iconos basados ​​en fuentes.

Nunca terminan siendo lo suficientemente nítidos a menos que los cree con la herramienta Pluma, tal como lo hice en el ejemplo anterior. Pero eso no siempre es posible ya que no todas las formas/iconos son fáciles de redibujar o corregir tan fácilmente usando la herramienta Pluma.

Entonces, ¿cuál es la solución a esto y cómo lo aborda personalmente al diseñar una interfaz de usuario cuando se trata de íconos?

Gracias por adelantado.