Каждая картинка - это отдельный запрос к серверу. Все это замедляет загрузку страницы (не говоря уже о том, что растровые картинки сами весят больше). Конечно png-спрайты частично решает эту проблему, но времени на их создание тоже уходит немало. Еще один минус использования картинок для таких задач - они размыленно смотрятся на retina и QHD мониторах, число которых растет изо дня в день.
Для таких вещей, которые вы описали, используйте иконочные шрифты или svg спрайты.
Самое популярное решение сейчас - это
Font Awesome - там уже есть огромное количество иконок, которые подойдут для решения ваших задач. Другие аналогичные сайты -
IcoMoon и
Fontastic.
Для остальных случаев (редкие иконки) можно сделать иконочный шрифт самостоятельно (последние 2 сервиса кстати с этим отлично справляются). Надо просто загрузить туда свои svg. На первый взгляд это может показаться сложным, но как только реализуете этот метод хоть в одном проекте - о вырезании картинок забудете навсегда. Плюс такими элементами можно управлять через css - например, менять цвет при наведении.
У второго способа тоже есть минусы - для поддержки старых браузеров придется делать большое количество фолбэков. Но если "смотреть в завтрашний день", то конечно лучше использовать его.
