Created with Sigil badge

Made something with Sigil? Put this badge on your site, in the footer or on an about page, and link it back here. It tells people what your project is built on, and it helps more people find Sigil!

Pick a version

Each one is an SVG with its text drawn as shapes, so it needs no fonts. The snippets link to usesigil.org. Copy one into your page as it is.

Created with Sigil

On a dark background

Gray words, a light "sigil" and gold parentheses. This is the one the game sites use.

HTML
<a href="https://usesigil.org/" class="created-with-sigil">
  <img src="https://usesigil.org/badge/created-with-sigil-on-dark.svg"
       width="78" height="51" alt="Created with Sigil">
</a>

Files: SVG, PNG at 1x, 2x and 4x

Created with Sigil

On a light background

Gray words, an ink "sigil" and ochre parentheses.

HTML
<a href="https://usesigil.org/" class="created-with-sigil">
  <img src="https://usesigil.org/badge/created-with-sigil-on-light.svg"
       width="78" height="51" alt="Created with Sigil">
</a>

Files: SVG, PNG at 1x, 2x and 4x

Created with Sigil

One color: white

For dark or colored backgrounds where the gold would clash.

HTML
<a href="https://usesigil.org/" class="created-with-sigil">
  <img src="https://usesigil.org/badge/created-with-sigil-mono-white.svg"
       width="78" height="51" alt="Created with Sigil">
</a>

Files: SVG, PNG at 1x, 2x and 4x

Created with Sigil

One color: ink

For light or colored backgrounds where the ochre would clash.

HTML
<a href="https://usesigil.org/" class="created-with-sigil">
  <img src="https://usesigil.org/badge/created-with-sigil-mono-ink.svg"
       width="78" height="51" alt="Created with Sigil">
</a>

Files: SVG, PNG at 1x, 2x and 4x

One color: your own

Paste this version into your page as inline SVG and it takes the CSS color around it, so it can match your site's palette. Set the color on the link, as the snippet does. The Copy button copies the whole thing, SVG included.

HTML
<a href="https://usesigil.org/" class="created-with-sigil" style="color: #8a93a3">
  <!-- the contents of created-with-sigil-mono-currentcolor.svg -->
</a>

File: SVG

Sites with light and dark modes

If your site follows the reader's light or dark setting, let the browser pick the version that fits:

HTML
<a href="https://usesigil.org/" class="created-with-sigil">
  <picture>
    <source srcset="https://usesigil.org/badge/created-with-sigil-on-dark.svg"
            media="(prefers-color-scheme: dark)">
    <img src="https://usesigil.org/badge/created-with-sigil-on-light.svg"
         width="78" height="51" alt="Created with Sigil">
  </picture>
</a>

In a README

Forges show README files on a light page by default, so use the light version:

Markdown
[![Created with Sigil](https://usesigil.org/badge/created-with-sigil-on-light.svg)](https://usesigil.org/)

Size and spacing

Hosting the files

Linking to the files on usesigil.org is fine, and it's what the snippets do. If your site has to work offline, or you'd rather it load nothing from other sites, download the SVG and serve it yourself. The PNGs are there for places that don't accept SVG; prefer the SVG everywhere else.