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