UI icons¶

Odoo’s UI relies on two icon systems:

Material Symbols (Google Fonts) is the primary icon library. It covers the vast majority of interface needs.
Odoo UI Icons (OI) is a supplementary library for icons not available in Material Symbols — custom view icons, brand logos (e.g. Facebook, GitHub), and other Odoo-specific glyphs.

Both systems share the same .oi base class and use a data-icon attribute to specify the icon to render.

Material Symbols¶

Material Symbols Rounded is loaded in the Odoo webclient. Use it for any standard icon: actions, navigation, status indicators, and so on.

Pass the icon’s ligature name (as listed on fonts.google.com/icons) to the data-icon attribute:

Example

<i class="oi" data-icon="check"/>
<i class="oi" data-icon="settings"/>
<i class="oi" data-icon="arrow_forward"/>

Use the Material Symbols library or the Odoo media library (see below) to browse and search available icons.

Note

Odoo bundles only a subset of Material Symbols rather than the full library. The list of supported icons is maintained in odoo/addons/web/tooling/icons/icons_wishlist.txt.

Odoo UI icons¶

The OI library covers icons not available in Material Symbols: brand logos, custom kanban-view icons, and other Odoo-specific glyphs. OI icons use the oi_ prefix in the data-icon attribute:

Example

<i class="oi" data-icon="oi_odoo"/>
<i class="oi" data-icon="oi_view-kanban"/>
<i class="oi" data-icon="oi_facebook"/>

Like Material Symbols library , Odoo custom icons are available via Odoo media library.

Odoo

oi_odoo

oi_studio

oi_view-kanban

oi_view-pivot

oi_view-cohort

oi_app_documents

oi_threads

Social

oi_bandcamp

oi_behance

oi_behance-square

oi_bluesky

oi_deviantart

oi_digg

oi_discord

oi_dribbble

oi_facebook

oi_facebook-square

oi_flickr

oi_foursquare

oi_google-plus

oi_imdb

oi_instagram

oi_kickstarter

oi_lastfm

oi_linkedin

oi_linkedin-square

oi_medium

oi_meetup

oi_mixcloud

oi_odnoklassniki

oi_pinterest

oi_pinterest-square

oi_product-hunt

oi_qq

oi_quora

oi_reddit

oi_reddit-square

oi_skype

oi_slack

oi_snapchat

oi_soundcloud

oi_spotify

oi_steam

oi_strava

oi_telegram

oi_tiktok

oi_tumblr

oi_twitch

oi_vimeo

oi_vk

oi_weibo

oi_whatsapp

oi_x

oi_x-square

oi_xing

oi_yelp

oi_youtube

oi_youtube-play

oi_youtube-square

Technologies

oi_amazon

oi_android

oi_angellist

oi_apple

oi_bitbucket

oi_bitbucket-square

oi_chrome

oi_codepen

oi_creative-commons

oi_css3

oi_dropbox

oi_drupal

oi_edge

oi_git

oi_github

oi_github-square

oi_gitlab

oi_google

oi_google-play

oi_hacker-news

oi_html5

oi_joomla

oi_linux

oi_opera

oi_safari

oi_stack-overflow

oi_trello

oi_windows

oi_wordpress

oi_yahoo

Payment methods

oi_paypal

oi_cc-paypal

oi_cc-amex

oi_cc-diners-club

oi_cc-discover

oi_cc-jcb

oi_cc-mastercard

oi_cc-stripe

oi_cc-visa

RTL adaptations¶

Some OI view icons have RTL adaptations that flip the glyph 180° when an RTL language is active. Material Symbols directional icons (arrows, chevrons, etc.) also include RTL adaptations; refer to the $ms-rtl-icons list in icons.scss for the full set.

Utility classes¶

The following utility classes can be combined with .oi:

oi-fw

Fixed width — useful for aligning icons in lists or menus.

Example

<i class="oi oi-fw" data-icon="check"></i>

oi-spin

Continuous 360° rotation (2s, linear). Useful for loading indicators.

Example

<i class="oi oi-spin" data-icon="progress_activity"></i>

oi-pulse

8-step pulsing rotation (1s). Alternative to oi-spin for a stepped animation.

Example

<i class="oi oi-pulse" data-icon="progress_activity"></i>

oi-filled

By default, Material Symbols are rendered in their outline style. Add oi-filled to render the filled variant of the icon.

Example

<i class="oi oi-filled" data-icon="favorite"></i>

Size classes

oi-lg, oi-2x … oi-10x scale the icon relative to the current font size.

Example

<i class="oi oi-2x" data-icon="check"></i>

CSS variables

The icon rendering can be adjusted via CSS custom properties:

--oi-font-size — overrides the icon’s font size.

Setting an icon from CSS

To set the icon’s glyph directly from CSS (rather than the data-icon attribute), use the icon’s ligature name as the content value. To use the filled variant, append _f to the name.

Example

/* Outline variant */
.my-element::before { content: "favorite"; }

/* Filled variant */
.my-element::before { content: "favorite_f"; }

Migration from Font Awesome¶

Font Awesome has been replaced by Material Symbols as the primary icon system. Temporary compatibility mappings translate legacy fa-* class names to their Material Symbols or OI equivalents, so existing code continues to render without immediate changes. See the fa_to_ms.scss and oi_to_ms.scss mapping files for the full set of equivalences.

Example

The following are equivalent after the compatibility mapping is applied:

<!-- Legacy (Font Awesome) -->
<i class="fa fa-check"></i>

<!-- New system -->
<i class="oi" data-icon="check"></i>

Important

The compatibility mapping is temporary and will be removed once the migration is complete. Update usages to the new system as soon as possible.

Migration steps:

Replace class="fa fa-<name>" with class="oi" data-icon="<ms-name>" where <ms-name> is the corresponding Material Symbols ligature name.
For icons not available in Material Symbols (brands, custom Odoo glyphs), use the OI library: class="oi" data-icon="oi_<name>".
Remove any fa-* size classes (fa-2x, etc.) and replace them with the equivalent oi-* size classes.

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

GLOBAL_FILTERS

NEW

COPY_FILE

SAVE

VERSION_HISTORY

CAMERA

DOWNLOAD_AS_JSON

ADD_TO_DASHBOARD

ODOO_LIST

INSERT_LIST

REFRESH_DATA

COMMENTS

LINE_CHART

STACKED_LINE_CHART

AREA_CHART

STACKED_AREA_CHART

COLUMN_CHART

STACKED_COLUMN_CHART

BAR_CHART

STACKED_BAR_CHART

COMBO_CHART

PIE_CHART

DOUGHNUT_CHART

SCATTER_CHART

GAUGE_CHART

SCORECARD_CHART

WATERFALL_CHART

POPULATION_PYRAMID_CHART

RADAR_CHART

FILLED_RADAR_CHART

GEO_CHART

FUNNEL_CHART

SUNBURST_CHART

TREE_MAP_CHART

CLEAR_AND_RELOAD

EXPORT_XLSX

OPEN_READ_ONLY

OPEN_DASHBOARD

OPEN_READ_WRITE

IMPORT_XLSX

UNDO

REDO

CUT

COPY_AS_IMAGE

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

SMALL_DOT_RIGHT_ALIGN

SORT_RANGE

FILTER_ICON

CHECK

NUMBER_FORMATS

FONT_SIZE

SPLIT_TEXT

DISPLAY_HEADER

COG

PLUS_IN_BOX

MINUS_IN_BOX

GROUP_ROWS

UNGROUP_ROWS

GROUP_COLUMNS

UNGROUP_COLUMNS

DATA_VALIDATION

THIN_DRAG_HANDLE

SHORT_THIN_DRAG_HANDLE

EDIT_TABLE

DELETE_TABLE

PAINT_TABLE

CIRCLE_INFO

PIVOT

INSERT_PIVOT

MOVE_SHEET_LEFT

MOVE_SHEET_RIGHT

RENAME_SHEET

CAROUSEL

Edit on GitHub