<p>Podman Desktop allows extensions to register custom icons that can be used for resources based on certain condition defined by a <ahref="/docs/extensions/write/when-clause-context">when clause</a>.</p>
<p>For example, the Kind extension register a custom icons by using the following instruction.</p>
<p>We restrict the format to the <ahref="https://www.w3.org/TR/WOFF2/"target="_blank"rel="noopener noreferrer">Web Open Font Format 2 (aka woff2)</a> to use icons as text, to keep consistency across the UI, as the color and size is managed by Podman-Desktop.</p>
<h3class="anchor anchorWithStickyNavbar_JmGV"id="creating-a-woff2-file">Creating a .woff2 file<ahref="#creating-a-woff2-file"class="hash-link"aria-label="Direct link to Creating a .woff2 file"title="Direct link to Creating a .woff2 file"></a></h3>
<p>You probably have an existing <code>.svg</code> file that you want to use, to make it possible you can use the tool <ahref="https://nfroidure.github.io/svgiconfont/"target="_blank"rel="noopener noreferrer">svgiconfont</a> made by <ahref="https://twitter.com/nfroidure"target="_blank"rel="noopener noreferrer">@nfroidure</a>.</p>
<p>To ensure the produced <code>.woff2</code> file contains the expected characters you created from your svg file(s). You can use the tool <ahref="https://fontforge.org/"target="_blank"rel="noopener noreferrer">fontforge.org</a> to visualize it.</p>
<divclass="theme-admonition theme-admonition-info admonition_WCGJ alert alert--info"><divclass="admonitionHeading_GCBg"><spanclass="admonitionIcon_L39b"><svgviewBox="0 0 14 16"><pathfill-rule="evenodd"d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><divclass="admonitionContent_pbrs"><p>To find the <code>fontCharacter</code> where your icons has been saved, you can search inside the FontForge tool by the name of the svg file you used.</p></div></div></div><footerclass="theme-doc-footer docusaurus-mt-lg"><divclass="theme-doc-footer-tags-row row margin-bottom--sm"><divclass="col"><b>Tags:</b><ulclass="tags_Ow0B padding--none margin-left--sm"><liclass="tag_DFxh"><aclass="tag_otG2 tagRegular_s0E1"href="/docs/tags/podman-desktop">podman-desktop</a></li><liclass="tag_DFxh"><aclass="tag_otG2 tagRegular_s0E1"href="/docs/tags/extension">extension</a></li><liclass="tag_DFxh"><aclass="tag_otG2 tagRegular_s0E1"href="/docs/tags/writing">writing</a></li><liclass="tag_DFxh"><aclass="tag_otG2 tagRegular_s0E1"href="/docs/tags/icons">icons</a></li></ul></div></div><divclass="theme-doc-footer-edit-meta-row row"><divclass="col"><ahref="https://github.com/containers/podman-desktop/tree/main/website/docs/extensions/write/adding-icons.md"target="_blank"rel="noopener noreferrer"class="theme-edit-this-page"><svgfill="currentColor"height="20"width="20"viewBox="0 0 40 40"class="iconEdit_bHB7"aria-hidden="true"><g><pathd="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><divclass="col lastUpdated_pbO5"></div></div></footer></article><navclass="pagination-nav docusaurus-mt-lg"aria-label="Docs pages"><aclass="pagination-nav__link pagination-nav__link--prev"href="/docs/extensions/write/when-clause-context"><divclass="pagination-nav__sublabel">Previous</div><divclass="pagination-nav__label">When clause contexts</div></a><aclass="pagination-nav__link pagination-nav__link--next"href="/docs/extensions/publish"><divclass="pagination-nav__sublabel">Next</div><divclass="pagination-nav__label">Publishing</div></a></nav></div></div><divclass="col col--3"><divclass="tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop"><ulclass="table-of-contents table-of-contents__left-border"><li><ahref="#creating-a-woff2-file"class="table-of-contents__link toc-highlight">Creating a .woff2 file</a></li></ul></div></div></div></div></main></div></div></div><footerclass="footer"><divclass="container container-fluid"><divclass="row footer__links"><divclass="col footer__col"><divclass="footer__title">Documentation</div><ulclass="footer__items clean-list"><liclass="footer__item"><aclass="footer__link-item"href="/docs/installation">Installing Podman Desktop</a></li><liclass="footer__item"><aclass="footer__link-item"href="/docs/migrating-from-docker">Migrating from Docker</a></li><liclass="footer__item"><aclass="footer__link-item"href="/docs/kubernetes">Working with Kubernetes</a></li><liclass="footer__item"><aclass="footer__link-item"href="/docs/troubleshooting">Troubleshooting</a></li></ul></div><divclass="col footer__col"><divclass="footer__title">Links</div><ulclass="footer__items clean-list"><liclass="footer__item"><ahref="https://github.com/containers/podman-desktop"target="_blank"rel="noopener noreferrer"class="footer__link-item">GitHub<svgwidth="13.5"height="13.5"aria-hidden="true"viewBox="0 0 24 24"class="iconExternalLink_nPrP"><pathfill="currentColor"d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><liclass="footer__item"><ahref="https://discord.com/invite/x5GzFF6QH4"target="_blank"rel="noopener noreferrer"class="footer__link-item">Chat (bridged): #podman-desktop on Discord<svgwidth="13.5"height="1
