NostalgiaPHP

Icons in NostalgiaPHP

Sometimes plain text just doesn’t cut it — icons help readers scan faster, add personality, and clarify meaning. NostalgiaPHP ships with a small starter icon pack you can use right away.

Bundled Icons

These live in /static/icons/

  • Home
  • Search
  • File
  • Markdown
  • Image
  • Gallery
  • Link
  • External Link
  • User
  • Calendar
  • Tag

Tip: these SVGs are tiny and styleable. Most use stroke="currentColor" so they inherit text color. The markdown.svg uses a filled badge with white glyphs for contrast.

How to Use Icons

1) As images

<img src="/static/icons/search.svg" alt="Search" />

2) Inline SVG via PHP include (inherits color)

<span class="text-gray-600 flex align-items-center gap-2">
  <?php include 'static/icons/search.svg'; ?>
  Search
</span>

3) As background images (utility class)

.icon { display:inline-block; width:1.25rem; height:1.25rem; vertical-align:middle; }
.icon-home { background: no-repeat center/contain url('/static/icons/home.svg'); }
<i class="icon icon-home" aria-hidden="true"></i>

Styling Tips

  • Color: wrap inline SVG with a color class (e.g., text-gray-600) and it’ll inherit that color.
  • Alignment: add vertical-align: middle; to icon class to align with text.
  • Accessibility: if the icon is decorative, set aria-hidden="true" and empty alt="". If it conveys meaning, include a concise alt or nearby text.

Where These Icons Come From

We curated this set from excellent, MIT-licensed projects — perfect if you want more:

Copy additional SVGs into /static/icons/ and use them the same way.

Example: Icon List in a Card

<ul>
  <li class="flex items-center gap-2">
    <?php include 'static/icons/file.svg'; ?>
    <span>Plain file</span>
  </li>
  <li class="flex items-center gap-2">
    <?php include 'static/icons/markdown.svg'; ?>
    <span>Markdown document</span>
  </li>
  <li class="flex items-center gap-2">
    <?php include 'static/icons/image.svg'; ?>
    <span>Image asset</span>
  </li>
</ul>

Happy icon-ing!