.. _reference/user_interface/ui_icons:

========
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
icons: :ref:`Odoo UI icons <ui/odoo-ui-icons>` and :ref:`Odoo Spreadsheet icons
<ui/odoo-spreadsheet-icons>`.

.. _ui/odoo-ui-icons:

Odoo UI icons
=============

The Odoo UI 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 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 mb-3">
          <div class="card text-center">
              <i class="oi oi-view h1 p-4"></i>
              <code>oi-view</code>
          </div>
      </div>

      <div class="o_icon_card col-6 col-sm-4 col-md-3 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 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 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 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 mb-3">
          <div class="card text-center">
              <i class="oi oi-text-break h1 p-4"></i>
              <code>oi-text-break</code>
          </div>
      </div>

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

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

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

      <div class="o_icon_card col-6 col-sm-4 col-md-3 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 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 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 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 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 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 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 mb-3">
          <div class="card text-center">
              <i class="oi oi-voip h1 p-4"></i>
              <code>oi-voip</code>
          </div>
      </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   </section>

RTL adaptations
---------------

Directional icons have :abbr:`RTL (right-to-left)` adaptations which flip the icons by 180 degrees
when an :abbr:`RTL (right-to-left)` language is selected.

.. raw:: html

   <section class="row">

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

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

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

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

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

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

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

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

   </section>

.. _ui/odoo-spreadsheet-icons:

Odoo Spreadsheet icons
======================

The `Odoo Spreadsheet <{GITHUB_PATH}/addons/spreadsheet/static/src/o_spreadsheet>`_ icons are
defined as `<svg>` elements and rendered using QWeb `templates
<{OWL_PATH}/doc/reference/templates.md>`_.

.. example::

   .. code-block:: html

      <t t-name="o-spreadsheet-Icon.GLOBAL_FILTERS">
          <svg width="20" height="20" viewbox="0 0 20 20">
              <path fill="currentColor" d="M1 3h12L7 9M5.5 6h3v11l-3-3M14 4h4v2h-4m-3 3h7v2h-7m0 3h7v2h-7"/>
          </svg>
      </t>

.. raw:: html

   <section class="row">

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#see-records"/>
                    </svg>
                </div>
                <code>SEE_RECORDS</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#global-filters"/>
                    </svg>
                </div>
                <code>GLOBAL_FILTERS</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#new"/>
                    </svg>
                </div>
                <code>NEW</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#copy-file"/>
                    </svg>
                </div>
                <code>COPY_FILE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#save"/>
                    </svg>
                </div>
                <code>SAVE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#version-history"/>
                    </svg>
                </div>
                <code>VERSION_HISTORY</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#camera"/>
                    </svg>
                </div>
                <code>CAMERA</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#download-as-json"/>
                    </svg>
                </div>
                <code>DOWNLOAD_AS_JSON</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#add-to-dashboard"/>
                    </svg>
                </div>
                <code>ADD_TO_DASHBOARD</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#odoo-list"/>
                    </svg>
                </div>
                <code>ODOO_LIST</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#insert-list"/>
                    </svg>
                </div>
                <code>INSERT_LIST</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#refresh-data"/>
                    </svg>
                </div>
                <code>REFRESH_DATA</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#comments"/>
                    </svg>
                </div>
                <code>COMMENTS</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#line-chart"/>
                    </svg>
                </div>
                <code>LINE_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#stacked-line-chart"/>
                    </svg>
                </div>
                <code>STACKED_LINE_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#area-chart"/>
                    </svg>
                </div>
                <code>AREA_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#stacked-area-chart"/>
                    </svg>
                </div>
                <code>STACKED_AREA_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#column-chart"/>
                    </svg>
                </div>
                <code>COLUMN_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#stacked-column-chart"/>
                    </svg>
                </div>
                <code>STACKED_COLUMN_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#bar-chart"/>
                    </svg>
                </div>
                <code>BAR_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#stacked-bar-chart"/>
                    </svg>
                </div>
                <code>STACKED_BAR_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#combo-chart"/>
                    </svg>
                </div>
                <code>COMBO_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#pie-chart"/>
                    </svg>
                </div>
                <code>PIE_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#doughnut-chart"/>
                    </svg>
                </div>
                <code>DOUGHNUT_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#scatter-chart"/>
                    </svg>
                </div>
                <code>SCATTER_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#gauge-chart"/>
                    </svg>
                </div>
                <code>GAUGE_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#scorecard-chart"/>
                    </svg>
                </div>
                <code>SCORECARD_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#waterfall-chart"/>
                    </svg>
                </div>
                <code>WATERFALL_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#population-pyramid-chart"/>
                    </svg>
                </div>
                <code>POPULATION_PYRAMID_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#radar-chart"/>
                    </svg>
                </div>
                <code>RADAR_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#filled-radar-chart"/>
                    </svg>
                </div>
                <code>FILLED_RADAR_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#geo-chart"/>
                    </svg>
                </div>
                <code>GEO_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#funnel-chart"/>
                    </svg>
                </div>
                <code>FUNNEL_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#sunburst-chart"/>
                    </svg>
                </div>
                <code>SUNBURST_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#tree-map-chart"/>
                    </svg>
                </div>
                <code>TREE_MAP_CHART</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#clear-and-reload"/>
                    </svg>
                </div>
                <code>CLEAR_AND_RELOAD</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#export-xlsx"/>
                    </svg>
                </div>
                <code>EXPORT_XLSX</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#open-read-only"/>
                    </svg>
                </div>
                <code>OPEN_READ_ONLY</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#open-dashboard"/>
                    </svg>
                </div>
                <code>OPEN_DASHBOARD</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#open-read-write"/>
                    </svg>
                </div>
                <code>OPEN_READ_WRITE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#import-xlsx"/>
                    </svg>
                </div>
                <code>IMPORT_XLSX</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#undo"/>
                    </svg>
                </div>
                <code>UNDO</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#redo"/>
                    </svg>
                </div>
                <code>REDO</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#cut"/>
                    </svg>
                </div>
                <code>CUT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#copy-as-image"/>
                    </svg>
                </div>
                <code>COPY_AS_IMAGE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#paste"/>
                    </svg>
                </div>
                <code>PASTE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#clear"/>
                    </svg>
                </div>
                <code>CLEAR</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#freeze"/>
                    </svg>
                </div>
                <code>FREEZE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#unfreeze"/>
                    </svg>
                </div>
                <code>UNFREEZE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#formula"/>
                    </svg>
                </div>
                <code>FORMULA</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#hide-row"/>
                    </svg>
                </div>
                <code>HIDE_ROW</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#unhide-row"/>
                    </svg>
                </div>
                <code>UNHIDE_ROW</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#hide-col"/>
                    </svg>
                </div>
                <code>HIDE_COL</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#unhide-col"/>
                    </svg>
                </div>
                <code>UNHIDE_COL</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#insert-row"/>
                    </svg>
                </div>
                <code>INSERT_ROW</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#insert-row-before"/>
                    </svg>
                </div>
                <code>INSERT_ROW_BEFORE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#insert-row-after"/>
                    </svg>
                </div>
                <code>INSERT_ROW_AFTER</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#insert-col"/>
                    </svg>
                </div>
                <code>INSERT_COL</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#insert-col-after"/>
                    </svg>
                </div>
                <code>INSERT_COL_AFTER</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#insert-col-before"/>
                    </svg>
                </div>
                <code>INSERT_COL_BEFORE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#insert-cell"/>
                    </svg>
                </div>
                <code>INSERT_CELL</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#insert-cell-shift-down"/>
                    </svg>
                </div>
                <code>INSERT_CELL_SHIFT_DOWN</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#insert-cell-shift-right"/>
                    </svg>
                </div>
                <code>INSERT_CELL_SHIFT_RIGHT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#delete-cell-shift-up"/>
                    </svg>
                </div>
                <code>DELETE_CELL_SHIFT_UP</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#delete-cell-shift-left"/>
                    </svg>
                </div>
                <code>DELETE_CELL_SHIFT_LEFT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#insert-dropdown"/>
                    </svg>
                </div>
                <code>INSERT_DROPDOWN</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#insert-sheet"/>
                    </svg>
                </div>
                <code>INSERT_SHEET</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#paint-format"/>
                    </svg>
                </div>
                <code>PAINT_FORMAT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#conditional-format"/>
                    </svg>
                </div>
                <code>CONDITIONAL_FORMAT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#clear-format"/>
                    </svg>
                </div>
                <code>CLEAR_FORMAT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#bold"/>
                    </svg>
                </div>
                <code>BOLD</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#italic"/>
                    </svg>
                </div>
                <code>ITALIC</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#underline"/>
                    </svg>
                </div>
                <code>UNDERLINE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#strike"/>
                    </svg>
                </div>
                <code>STRIKE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#text-color"/>
                    </svg>
                </div>
                <code>TEXT_COLOR</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#fill-color"/>
                    </svg>
                </div>
                <code>FILL_COLOR</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#merge-cell"/>
                    </svg>
                </div>
                <code>MERGE_CELL</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#align-left"/>
                    </svg>
                </div>
                <code>ALIGN_LEFT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#align-center"/>
                    </svg>
                </div>
                <code>ALIGN_CENTER</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#align-right"/>
                    </svg>
                </div>
                <code>ALIGN_RIGHT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#align-top"/>
                    </svg>
                </div>
                <code>ALIGN_TOP</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#align-middle"/>
                    </svg>
                </div>
                <code>ALIGN_MIDDLE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#align-bottom"/>
                    </svg>
                </div>
                <code>ALIGN_BOTTOM</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#wrapping-overflow"/>
                    </svg>
                </div>
                <code>WRAPPING_OVERFLOW</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#wrapping-wrap"/>
                    </svg>
                </div>
                <code>WRAPPING_WRAP</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#wrapping-clip"/>
                    </svg>
                </div>
                <code>WRAPPING_CLIP</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#borders"/>
                    </svg>
                </div>
                <code>BORDERS</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#border-hv"/>
                    </svg>
                </div>
                <code>BORDER_HV</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#border-h"/>
                    </svg>
                </div>
                <code>BORDER_H</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#border-v"/>
                    </svg>
                </div>
                <code>BORDER_V</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#border-external"/>
                    </svg>
                </div>
                <code>BORDER_EXTERNAL</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#border-left"/>
                    </svg>
                </div>
                <code>BORDER_LEFT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#border-top"/>
                    </svg>
                </div>
                <code>BORDER_TOP</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#border-right"/>
                    </svg>
                </div>
                <code>BORDER_RIGHT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#border-bottom"/>
                    </svg>
                </div>
                <code>BORDER_BOTTOM</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#border-clear"/>
                    </svg>
                </div>
                <code>BORDER_CLEAR</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#border-type"/>
                    </svg>
                </div>
                <code>BORDER_TYPE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#border-color"/>
                    </svg>
                </div>
                <code>BORDER_COLOR</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#border-no-color"/>
                    </svg>
                </div>
                <code>BORDER_NO_COLOR</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#plus"/>
                    </svg>
                </div>
                <code>PLUS</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#minus"/>
                    </svg>
                </div>
                <code>MINUS</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#list"/>
                    </svg>
                </div>
                <code>LIST</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#arrow-down"/>
                    </svg>
                </div>
                <code>ARROW_DOWN</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#arrow-up"/>
                    </svg>
                </div>
                <code>ARROW_UP</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#arrow-right"/>
                    </svg>
                </div>
                <code>ARROW_RIGHT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#smile"/>
                    </svg>
                </div>
                <code>SMILE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#meh"/>
                    </svg>
                </div>
                <code>MEH</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#frown"/>
                    </svg>
                </div>
                <code>FROWN</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#green-dot"/>
                    </svg>
                </div>
                <code>GREEN_DOT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#yellow-dot"/>
                    </svg>
                </div>
                <code>YELLOW_DOT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#red-dot"/>
                    </svg>
                </div>
                <code>RED_DOT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#small-dot-right-align"/>
                    </svg>
                </div>
                <code>SMALL_DOT_RIGHT_ALIGN</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#sort-range"/>
                    </svg>
                </div>
                <code>SORT_RANGE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#filter-icon"/>
                    </svg>
                </div>
                <code>FILTER_ICON</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#check"/>
                    </svg>
                </div>
                <code>CHECK</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#number-formats"/>
                    </svg>
                </div>
                <code>NUMBER_FORMATS</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#font-size"/>
                    </svg>
                </div>
                <code>FONT_SIZE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#split-text"/>
                    </svg>
                </div>
                <code>SPLIT_TEXT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#display-header"/>
                    </svg>
                </div>
                <code>DISPLAY_HEADER</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#cog"/>
                    </svg>
                </div>
                <code>COG</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#plus-in-box"/>
                    </svg>
                </div>
                <code>PLUS_IN_BOX</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#minus-in-box"/>
                    </svg>
                </div>
                <code>MINUS_IN_BOX</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#group-rows"/>
                    </svg>
                </div>
                <code>GROUP_ROWS</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#ungroup-rows"/>
                    </svg>
                </div>
                <code>UNGROUP_ROWS</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#group-columns"/>
                    </svg>
                </div>
                <code>GROUP_COLUMNS</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#ungroup-columns"/>
                    </svg>
                </div>
                <code>UNGROUP_COLUMNS</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#data-validation"/>
                    </svg>
                </div>
                <code>DATA_VALIDATION</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#thin-drag-handle"/>
                    </svg>
                </div>
                <code>THIN_DRAG_HANDLE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#short-thin-drag-handle"/>
                    </svg>
                </div>
                <code>SHORT_THIN_DRAG_HANDLE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#edit-table"/>
                    </svg>
                </div>
                <code>EDIT_TABLE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#delete-table"/>
                    </svg>
                </div>
                <code>DELETE_TABLE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#paint-table"/>
                    </svg>
                </div>
                <code>PAINT_TABLE</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#circle-info"/>
                    </svg>
                </div>
                <code>CIRCLE_INFO</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#pivot"/>
                    </svg>
                </div>
                <code>PIVOT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#insert-pivot"/>
                    </svg>
                </div>
                <code>INSERT_PIVOT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#move-sheet-left"/>
                    </svg>
                </div>
                <code>MOVE_SHEET_LEFT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#move-sheet-right"/>
                    </svg>
                </div>
                <code>MOVE_SHEET_RIGHT</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#rename-sheet"/>
                    </svg>
                </div>
                <code>RENAME_SHEET</code>
            </div>
        </div>

        <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
            <div class="card text-center">
                <div class="p-2 mx-auto">
                    <svg class="os-icon" aria-hidden="true" role="img">
                        <use href="#carousel"/>
                    </svg>
                </div>
                <code>CAROUSEL</code>
            </div>
        </div>

   </section>