UI icons¶
Odoo's user interface mostly relies on FontAwesome4 icons.
To cover FontAwesome's lack of iconography for specific functionalities, we designed our own icons: Odoo UI icons and Odoo Spreadsheet icons.
Odoo UI icons¶
The Odoo UI icons can be rendered using the main oi
class in conjunction with the specific icon
class.
Example
<i class="oi oi-odoo"/>
oi-odoo
oi-view
oi-view-kanban
oi-view-list
oi-view-cohort
oi-view-pivot
oi-text-break
oi-text-inline
oi-text-wrap
oi-text-effect
oi-search
oi-group
oi-settings-adjust
oi-panel-right
oi-launch
oi-apps
oi-studio
oi-voip
oi-gif-picker
oi-close
oi-chevron-down
oi-chevron-left
oi-chevron-right
oi-chevron-up
oi-arrows-h
oi-arrows-v
oi-arrow-down-left
oi-arrow-down-right
oi-arrow-down
oi-arrow-left
oi-arrow-right
oi-arrow-up-left
oi-arrow-up-right
oi-arrow-up
oi-draggable
oi-archive
oi-unarchive
oi-smile-add
RTL adaptations¶
Directional icons have RTL adaptations which flip the icons by 180 degrees when an RTL language is selected.
oi-chevron-left
oi-chevron-right
oi-arrow-down-left
oi-arrow-down-right
oi-arrow-left
oi-arrow-right
oi-arrow-up-left
oi-arrow-up-right
Odoo Spreadsheet icons¶
The Odoo Spreadsheet icons are
defined as <svg>
elements and rendered using QWeb templates.
Example
<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>
SEE_RECORDS
DOWNLOAD
GLOBAL_FILTERS
CLEAR_AND_RELOAD
EXPORT_XLSX
OPEN_READ_ONLY
OPEN_DASHBOARD
OPEN_READ_WRITE
IMPORT_XLSX
UNDO
REDO
CUT
PASTE
CLEAR
FREEZE
UNFREEZE
FORMULA
HIDE_ROW
UNHIDE_ROW
HIDE_COL
UNHIDE_COL
INSERT_ROW
INSERT_ROW_BEFORE
INSERT_ROW_AFTER
INSERT_COL
INSERT_COL_AFTER
INSERT_COL_BEFORE
INSERT_CELL
INSERT_CELL_SHIFT_DOWN
INSERT_CELL_SHIFT_RIGHT
DELETE_CELL_SHIFT_UP
DELETE_CELL_SHIFT_LEFT
INSERT_DROPDOWN
INSERT_SHEET
PAINT_FORMAT
CONDITIONAL_FORMAT
CLEAR_FORMAT
BOLD
ITALIC
UNDERLINE
STRIKE
TEXT_COLOR
FILL_COLOR
MERGE_CELL
ALIGN_LEFT
ALIGN_CENTER
ALIGN_RIGHT
ALIGN_TOP
ALIGN_MIDDLE
ALIGN_BOTTOM
WRAPPING_OVERFLOW
WRAPPING_WRAP
WRAPPING_CLIP
BORDERS
BORDER_HV
BORDER_H
BORDER_V
BORDER_EXTERNAL
BORDER_LEFT
BORDER_TOP
BORDER_RIGHT
BORDER_BOTTOM
BORDER_CLEAR
BORDER_TYPE
BORDER_COLOR
BORDER_NO_COLOR
PLUS
MINUS
LIST
ARROW_DOWN
ARROW_UP
ARROW_RIGHT
SMILE
MEH
FROWN
GREEN_DOT
YELLOW_DOT
RED_DOT
SORT_RANGE
FILTER_ICON
CHECK
NUMBER_FORMATS
FONT_SIZE
SPLIT_TEXT
DISPLAY_HEADER
COG
PLUS_IN_BOX
GROUP_ROWS
UNGROUP_ROWS
GROUP_COLUMNS
UNGROUP_COLUMNS
DATA_VALIDATION
THIN_DRAG_HANDLE
INSERT_PIVOT