Important: Please read the Qt Code of Conduct -

How do I add Imaged on the Tab ?

  • This is what i have now
    alt text

    This is what i want it to be
    alt text

    Instead of those Text i want to add those Images on the Tab

    Please ignore the Borders since i want a cleaner look .

  • @Smaranil

    Did you see already this version of addTab?

  • i am unable to understand that if there is any video explaining this it would be helpful. since i am not a Coder i only do Designing and a little bit of Copy paste work

  • @Smaranil

    How and with what did you create the tabs shown above?

    Probably best is to post a code section.

  • @Smaranil
    if you are designer You do not need to know this.
    And if you want to know how to do this, then you should learn how to do it.

  • @koahnig I used QTabWidegt and used Stylesheet to make it look that way . Still since u asked for the whole code i will give it

    Header Files


    #ifndef MAINWINDOW_H
    #define MAINWINDOW_H
    #include <QMainWindow>
    #include <QMouseEvent>
    namespace Ui {
    class MainWindow;
    class MainWindow : public QMainWindow
        explicit MainWindow(QWidget *parent = 0);
        Ui::MainWindow *ui;
        void mousePressEvent(QMouseEvent *event);
        void mouseMoveEvent(QMouseEvent *event);
        int m_nMouseClick_X_Coordinate;
        int m_nMouseClick_Y_Coordinate;
    #endif // MAINWINDOW_H


    #include "mainwindow.h"
    #include <QApplication>
    int main(int argc, char *argv[])
        QApplication a(argc, argv);
        MainWindow w;
        return a.exec();


    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    MainWindow::MainWindow(QWidget *parent) :
        ui(new Ui::MainWindow)
        delete ui;
    void MainWindow::mousePressEvent(QMouseEvent *event) {
        m_nMouseClick_X_Coordinate = event->x();
        m_nMouseClick_Y_Coordinate = event->y();
    void MainWindow::mouseMoveEvent(QMouseEvent *event) {

    stylesheet of Qtabwidget

    QTabBar::tab:selected { 
    color: rgb(0, 0, 0);
    background-color:rgb(255, 255, 255);
    QTabBar::tab:!selected {
    color:rgb(0, 0, 0);
    background-color:rgb(223, 223, 223);
    border-bottom-color: #4FA600;
    QTabWidget:pane { /*replace icon text as pane ok....*/
    margin: 1px,1px,1px,1px;
    background-color: rgb(255,255,255);
    QTabBar::tab { 
    height: 130px;
    width: 130px;
    background-color: rgb(255,255,255);
    background-color: rgb(255,255,255);
    font: 75 14pt "Arial Rounded MT Bold";
    QTabWidget::tab-bar { 
    left: 5px; /* move to the right by 5px */
    bottom: -1px;
    background-color: rgb(255,255,255); } 
    QTabWidget::pane { border: 0; }

    [edit:koahnig revised the code tagged sections for easier reading]

  • @Smaranil

    if you got to this page, there are apparently examples of including icons.

    However, I would not know how you can select and modify a specific tab there using the style-sheet.

    However, you can also source code to set an icon

    you would need something like

    QIcon myIcon ("c:/icons/myIconFile");
    ui->%here is the name of the tab widget%->setTabIcon ( 0, myIcon );

    QIcon contructor tells you about the read options.

  • Lifetime Qt Champion

    You can assign icons directly in Designer
    alt text

    Note, that if the app should be anything more that a demo, you should use
    a QResource file to hold the images and not be tempted to use "Choose file" and point to image
    on random paths.

Log in to reply