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,THESMARC 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! 🎯
