:hide-page-toc:

========
UI icons
========

Odoo's user interface mostly relies on `FontAwesome4 icons <https://fontawesome.com/v4/icons/>`_.

To cover FontAwesome's lack of iconography for specific functionalities, we designed our own
icon-font. These icons can be rendered using the main `oi` class in conjunction with the specific
icon class.

.. example::

   .. code-block:: html

      <i class="oi oi-odoo"/>

.. raw:: html

   <section class="row">

       <div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
           <div class="card text-center">
               <i class="oi oi-apps h1 p-4"></i>
               <code>oi-apps</code>
           </div>
       </div>

       <div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
           <div class="card text-center">
               <i class="oi oi-group h1 p-4"></i>
               <code>oi-group</code>
           </div>
       </div>

       <div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
           <div class="card text-center">
               <i class="oi oi-launch h1 p-4"></i>
               <code>oi-launch</code>
           </div>
       </div>

       <div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
           <div class="card text-center">
               <i class="oi oi-odoo h1 p-4"></i>
               <code>oi-odoo</code>
           </div>
       </div>

       <div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
           <div class="card text-center">
               <i class="oi oi-panel-right h1 p-4"></i>
               <code>oi-panel-right</code>
           </div>
       </div>

       <div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
           <div class="card text-center">
               <i class="oi oi-search h1 p-4"></i>
               <code>oi-search</code>
           </div>
       </div>

       <div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
           <div class="card text-center">
               <i class="oi oi-settings-adjust h1 p-4"></i>
               <code>oi-settings-adjust</code>
           </div>
       </div>

       <div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
           <div class="card text-center">
               <i class="oi oi-studio h1 p-4"></i>
               <code>oi-studio</code>
           </div>
       </div>

       <div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
           <div class="card text-center">
               <i class="oi oi-view-cohort h1 p-4"></i>
               <code>oi-view-cohort</code>
           </div>
       </div>

       <div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
           <div class="card text-center">
               <i class="oi oi-view-kanban h1 p-4"></i>
               <code>oi-view-kanban</code>
           </div>
       </div>

       <div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
           <div class="card text-center">
               <i class="oi oi-view-list h1 p-4"></i>
               <code>oi-view-list</code>
           </div>
       </div>

       <div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
           <div class="card text-center">
               <i class="oi oi-view-pivot h1 p-4"></i>
               <code>oi-view-pivot</code>
           </div>
       </div>

       <div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
           <div class="card text-center">
               <i class="oi oi-voip h1 p-4"></i>
               <code>oi-voip</code>
           </div>
       </div>

   </section>