So I am designing something that will tell the user whether something is online or offline. The problem is, I cant decide on a final design for my icons. The various designs look better on different pages. For example, on this page, I think the icon on top looks better because it is easier to read (the numbers are a small font size on a large screen.)
On the other hand, when there is a vertical list, I think its easier to read the other design (one on the right) mainly because I can make it larger on the vertical list so users can easily distinguish whether the arrow is up or down. When this design is too small, it can be difficult to see the arrow shape. The one on the left seems like it can work for vertical lists, but I think the circle provides a cleaner UI when there is a large amount of items. Would it be a problem if I used these icons interchangeably or should I just pick one and stick to it?