Icons in Odoo 17

Icons play an important role in Odoo 17 by improving usability, navigation clarity, and visual consistency across backend views and frontend website pages.
This article explains how icons work in Odoo 17, where they can be used, and best practices for developers.

1. Icon System in Odoo 17

Odoo 17 primarily relies on Font Awesome icons, integrated into both:

• Backend (form views, tree views, menus, buttons)
• Frontend (website pages, snippets, custom templates)

Odoo 17 uses Font Awesome 5 Free, which includes: 

• Regular icons (fa)
• Brand icons (fab)

2. Using Icons in Backend Views (XML)

2.1 Icons in Menu Items

You can define icons for menu items using the web_icon or icon attribute.

<menuitem

    id="menu_sales_custom"

    name="Custom Sales"

    parent="sale.sale_menu_root"

    web_icon="my_module,static/description/icon.png"/>

Alternatively, use a Font Awesome icon:

<menuitem

    id="menu_sales_custom"

    name="Custom Sales"

    icon="fa-shopping-cart"/>

2.2 Icons in Buttons

Icons can be added to form view buttons using the icon attribute.

<button

    name="action_confirm"

    string="Confirm"

    type="object"

    class="btn-primary"

    icon="fa-check"/>

Common button icons:

• fa-check
• fa-times
• fa-refresh
• fa-download

2.3 Icons in Smart Buttons

Smart buttons often include icons for better UX.

<button

    name="action_open_orders"

    type="object"

    class="oe_stat_button"

    icon="fa-file-text">

    <field name="order_count" widget="statinfo"/>

</button>

3. Using Icons in Website Pages (Frontend)

3.1 Font Awesome Icons in HTML

You can directly use Font Awesome classes in website HTML blocks or templates.

<i class="fs fa-cogs"></i>

3.2 Icons with Text

Icons are commonly used alongside text for better readability.

<p>

    <i class="fa fa-check-circle"></i>

    Fully Integrated with Odoo 17

</p>

3.3 Icons in Website Snippets

When editing a page in Edit Mode:

1. Drag a Text or Features snippet
2. Use the Icon Picker from the editor toolbar
3. Select an icon from the Font Awesome library

This method requires no coding and is recommended for content editors.

4. Using Icons in QWeb Templates

Icons can be used in custom QWeb templates for reports or website pages.

<t t-name="my_module.template_example">

    <div>

        <i class="fa fa-info-circle"></i>

        <span>Additional Information</span>

    </div>

</t>

5. Styling Icons with CSS

Icons can be styled like text using CSS.

.custom-icon {

    color: #875A7B;

    font-size: 20px;

    margin-right: 8px;

}

Usage:

<i class="fas fa-star custom-icon"></i>