Enhancing Koha OPAC: Display Item Types with Icons (Koha 25.11 Guide)

If you're using Koha 25.11 and want to improve your OPAC interface, one powerful customization is displaying item types (Book, Thesis, Article, etc.) with icons alongside each bibliographic record.

This improves usability and gives your OPAC a more modern, professional look.

In this guide, we’ll walk through a complete, working solution to achieve this.

🚀 Why Display Item Types?

By default, Koha OPAC may not clearly highlight the type of material in search results. Adding item types helps users quickly identify:

📘 Books
🎓 Theses
📰 Articles
📜 Manuscripts
📖 Periodicals

🔍 Understanding the Data

Koha stores item types in two places:

Database (itemtypes table) → codes like BK, THES
MARC field 942$c → often contains descriptions like Books, Thesis

⚠️ Important:
XSLT reads MARC data, so you must match values like:

Books (not BK)

🛠️ Step 1: Add Icon Files

Create a folder for item type icons:

/usr/share/koha/opac/htdocs/opac-tmpl/bootstrap/images/itemtypes/

Add your icon images:

book.png
thesis.png
article.png
manuscript.png
periodical.png
default.png

🧩 Step 2: Modify XSLT File

Open the OPAC XSLT file:

/usr/share/koha/opac/htdocs/opac-tmpl/bootstrap/en/xslt/MARC21slim2OPACResults.xsl

Inside the template:

<xsl:template match="record">

Insert the following code where you want the item type to appear (usually near the title):

<!-- ===== ITEM TYPE WITH ICON START ===== -->

<xsl:variable name="itype" select="normalize-space(marc:datafield[@tag='942']/marc:subfield[@code='c'])"/>

<span class="itemtype-label">

    <xsl:choose>

        <xsl:when test="$itype='Books'">
            <img src="/opac-tmpl/bootstrap/images/itemtypes/book.png" class="itemtype-icon"/>
            Book
        </xsl:when>

        <xsl:when test="$itype='Thesis'">
            <img src="/opac-tmpl/bootstrap/images/itemtypes/thesis.png" class="itemtype-icon"/>
            Thesis
        </xsl:when>

        <xsl:when test="$itype='Articles'">
            <img src="/opac-tmpl/bootstrap/images/itemtypes/article.png" class="itemtype-icon"/>
            Article
        </xsl:when>

        <xsl:when test="$itype='Manuscript'">
            <img src="/opac-tmpl/bootstrap/images/itemtypes/manuscript.png" class="itemtype-icon"/>
            Manuscript
        </xsl:when>

        <xsl:when test="$itype='Periodicals'">
            <img src="/opac-tmpl/bootstrap/images/itemtypes/periodical.png" class="itemtype-icon"/>
            Periodical
        </xsl:when>

        <xsl:otherwise>
            <img src="/opac-tmpl/bootstrap/images/itemtypes/default.png" class="itemtype-icon"/>
            <xsl:value-of select="$itype"/>
        </xsl:otherwise>

    </xsl:choose>

</span>

<!-- ===== ITEM TYPE WITH ICON END ===== -->

🎨 Step 3: Add Styling

Go to:

Koha → Administration → System Preferences → OPACUserCSS

Add:

.itemtype-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.itemtype-icon {
    width: 18px;
    height: 18px;
}

🔄 Step 4: Restart Services

Run:

sudo systemctl restart koha-common
sudo systemctl restart apache2

Then refresh your browser (Ctrl + F5).

🎯 Final Result

Your OPAC search results will now display clean, visual item types like:

📘 Book
🎓 Thesis
📰 Article
📜 Manuscript
📖 Periodical

Each with a matching icon and label.

⚠️ Troubleshooting

Icons not showing?

Check file path:

/opac-tmpl/bootstrap/images/itemtypes/book.png

Test in browser:

http://your-koha/opac-tmpl/bootstrap/images/itemtypes/book.png

Wrong item type showing?

Verify MARC field:

942$c

Ensure values match exactly:

Books, Thesis, Articles, Manuscript, Periodicals

💡 Pro Tips

Use SVG icons for better quality
Keep icon sizes consistent
Avoid hardcoding too many conditions — keep it maintainable

🎉 Conclusion

With just a small XSLT customization, you can significantly enhance the user experience of your Koha OPAC. Clear item type labels and icons make browsing faster, easier, and more visually appealing.

🚀 What’s Next?

You can further enhance your OPAC by:

Adding filters by item type
Grouping results (Books / Theses / Journals)
Customizing the detail page layout

If you need help with advanced customization, feel free to explore further or extend this implementation.

Happy customizing! 🎯

Dr. Muhammad Hamidullah Library

Monday, April 6, 2026