Icons

These icons are included in one big SVG on most pages hosted at getctzn.com and ctznapp.com

Email icons

Here are a few more icons used in emails

Switch to Daily/Weekly

Play video

Dimensions

Consider adding width and height attributes to the icon, just like you would for an image. This will help the icons render at a reasonable size without a style sheet. A value of 24 pixels works well in most cases.

<svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-picture" ></use></svg>

If you add a width and height, you’ll also want to include a viewBox with the same dimensions. (This helps with styling, particularly in Safari.)

<svg class="icon" width="24" height="24" viewBox="0 0 24 24">
  <switch><use xlink:href="#icon-add" ></use><foreignObject>Add</foreignObject></switch>
</svg>

Alternate Text

Consider adding alternate text if the icon represents content (just like an alt attribute for an <img> element).

<button>
  <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
    <switch><use xlink:href="#icon-add" ></use><foreignObject>Add</foreignObject></switch>
  </svg>
</button>

<button>
  <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
    <use xlink:href="#icon-add"></use>
  </svg>
  Add
</button>

Form fields

<form>
  <p class="text">
    <label>
      <span>Password</span><br />
      <input type="password" placeholder="Password" />
    </label>
  </p>
</form>

<form class="has-icon">
  <p class="text">
    <label>
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#padlock"></use></svg>
      <span>Password</span><br />
      <input type="password" placeholder="Password" />
    </label>
  </p>
</form>

<form class="has-icon">
  <p class="text error">
    <label>
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-padlock"></use></svg>
      <span>Password</span><br />
      <input type="password" placeholder="Password" />
    </label>
  </p>
</form>

<form class="has-icon">
  <p class="text success">
    <label>
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-padlock"></use></svg>
      <span>Password</span><br />
      <input type="password" placeholder="Password" />
    </label>
  </p>
</form>

Toolbars

<section class="page">
  <header>
    <h1>Page Title</h1>
    <a href="#back" class="back">
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
        <switch><use xlink:href="#icon-back"></use><foreignObject>←</foreignObject></switch>
      </svg>
      <span>Go Back</span>
    </a>
    <a href="#options" class="next">
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
        <switch><use xlink:href="#icon-more"></use><foreignObject>Options</foreignObject></switch>
      </svg>
    </a>
  </header>
  …
</section>

• Switch Push
• New Post
• New Mix
• My Mixes

<ul class="create">
  <li>
    <a href="#switch">
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-switch"></use></svg>
      Switch Push
    </a>
  </li>
  <li>
    <a href="#edit-post">
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-note"></use></svg>
      New Post
    </a>
  </li>
  <li>
    <a href="#new-mix">
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-mix"></use></svg>
      New Mix
    </a>
  </li>
  <li>
    <a href="#mixes">
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-mixes"></use></svg>
      My Mixes
    </a>
  </li>
</ul>