khanh.pndc/odoo-docs
1
0
Fork 0
mirror of https://github.com/odoo/documentation.git synced 2025-12-12 07:29:27 +07:00
Code Issues Packages Projects Releases Wiki Activity
Files
f054d73fdadcf2642d6603b4a9e1f164095ed8d1
odoo-docs/content/developer/reference/user_interface/icons.rst
Sam Lieber (sali) f054d73fda [IMP] UI: odoo spreadsheet svg icons 
X-original-commit: a97b6bccee
2025-08-20 09:28:03 -04:00

1898 lines
65 KiB
ReStructuredText
Raw Blame History

.. _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="#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>
</section>
Reference in New Issue View Git Blame Copy Permalink