Icons in Vanilla framework fit within a 1rem square. When placing icons in a table, it should be clear which value the icons are associated with. To achieve that, the space between icon and its associated text should be less than the space between an icon and an unrelated value. In the screen below, this is achieved by fixing the space between value and associated icon at .5rem, and ensuring at least 1rem of space between text in adjacent columns. Resizing increases the latter distance, but has no effect on the former.
In the following example:
-
Icons for the “Status” column stay at a fixed distance (.5rem) from the status text. Lack of an icon (as in the third row) does not disrupt the alignment of text in the status column. Resizing the table does not affect the spacing between status icon and status text.
-
Preferably, icon position follows alignment - this is to ensure the icons are aligned as well.
There are cases when this rule can be disregarded. For example, keeping icons in separate columns would result in gaps that make it unclear which value the 3rd row edit icon is associated with:
