Our brain can sometimes perceive information a little differently than intended. This is called an optical illusion. Optical illusion also applies to design. However, with designing interfaces, it works the opposite way; you need to break the laws of physics and mathematics and slightly change how the elements look to create an optical balance.
Size
When we put a square and a circle next to each other and give them the exact same size, we could visually feel that the circle is smaller than the square. In that case, we slightly increase our circle, and the shapes will look visually closer to each other, even though the diameter of the circle is, in fact, larger than the diameter of the square.
Color
Compensation in the optical balance with colors is less noticeable. However, in a case where we put a filled icon next to a text, we might still encounter an issue; the text could look a little dimmer. This inconsistency happens because characters, in comparison to a filled icon, are made of thin lines, and those have less visual weight than the icon.
To counter the issue regarding the visual weight, we could give the text a slightly darker color compared to the icon.
Positioning
When we place an icon next to a text and align them vertically, we could end up positioning the icon higher relative to the text. This is where we need to consider the baseline of the text as well since both objects have different weights. In this case, we just need to lower the icon inside the bounding box, as shown in the example in the image below.
