Icons and Text
==============

When to Use
-----------

Combining icons and text can be used to identify data and actions in a
user interface. Examples include toolbar actions, file and folder
displays in a file manager, application listings, and notifications. The
layout should be consistent.

How to Use
----------

.. image:: /img/HIGPatternIconsAndText.png
   :alt: Alignment of text and icons.

.. attention::
   Make sure to read about how :doc:`units and measurements </layout/units>` are used for design and development.

-  Where icons are shown with text, use the layout guidelines above.

Implementation
--------------

-  For 16x16px icons and smaller, the 8px margins may be reduced to 4px.
-  Where icons are shown without text, always provide tooltip text and
   alternate text for accessibility.
-  If Secondary Text is normally present, but is empty in a particular
   instance, align the Primary Text to the vertical center.