Каков наилучший подход при разработке значков пользовательского интерфейса веб-сайта/приложения в Photoshop?

Как следует из названия, я хотел бы знать, что лучше всего использовать при вставке/использовании значка при разработке пользовательского интерфейса веб-сайта/приложения. Должен ли я вставить его как «смарт-объект», значок на основе шрифта или векторную маску?

Я просмотрел множество веб-сайтов с точки зрения дизайна пользовательского интерфейса и того, насколько четким / пиксельным является их дизайн, в основном в отношении использования значков, и, к сожалению, считаю, что большинство из них растрированы! Несмотря на то, что большинство из них используют SVG, они все еще не такие четкие, как можно было бы ожидать, и всегда имеют пиксельные и размытые края.

Например, взгляните на это;

Я понял, что это верно для многих сайтов, а не только для eBay! Это верно независимо от того, используют ли они значки на основе шрифтов или значки SVG.

Я часто сталкиваюсь с этой проблемой, когда начинаю новый дизайн в Photoshop, а затем кодирую его. Например, иногда я нахожу, что смарт-объекты более четкие, чем значки на основе шрифта, а иногда даже векторные маски. Я не знаю, что именно вызывает эту проблему и почему. Даже если вы измените их размер в Illustrator, это все равно произойдет, и это всегда заканчивается тем, что НЕ привязывается к нужному пикселю. То же самое касается иконок на основе шрифтов.

Они никогда не станут достаточно резкими, если вы не создадите их с помощью инструмента «Перо», как я сделал для примера выше. Но это не всегда возможно, так как не все фигуры/значки легко перерисовать или исправить с помощью инструмента «Перо».

Итак, каково решение этой проблемы и как вы лично подходите к этому при разработке пользовательского интерфейса, когда дело доходит до иконок?

Заранее спасибо.