---
number: "04"
---

<ChapterHeader number="04" title="Iconography" />

<DescriptionSection
  action={<DownloadButton href="/icons.zip">Export icons</DownloadButton>}
>
  The icon set is built for use, not decoration. Shapes are reduced to the
  essentials so every symbol reads quickly, feels intentional, and stays
  consistent with the rest of the brand.
</DescriptionSection>

<ContentSection>

<SectionTitle title="Icon Library" />

<IconTileContainer>
  <IconTile
    label="Subdirectory right"
    meta={["subdirectory_arrow_right", "16, 24, 32px"]}
  >
    <img
      src="/docs/iconography/subdirectory-arrow-right.svg"
      alt="Subdirectory arrow right"
    />
  </IconTile>
  <IconTile label="Arrow left" meta={["arrow_left_alt", "16, 24px"]}>
    <img src="/docs/iconography/arrow-left.svg" alt="Arrow left" />
  </IconTile>
  <IconTile label="Arrow right" meta={["arrow_right_alt", "24px"]}>
    <img src="/docs/iconography/arrow-right.svg" alt="Arrow right" />
  </IconTile>
  <IconTile label="Chevron left" meta={["chevron_left", "24px"]}>
    <img src="/docs/iconography/chevron-left.svg" alt="Chevron left" />
  </IconTile>
  <IconTile label="Chevron right" meta={["chevron_right", "24px"]}>
    <img src="/docs/iconography/chevron-right.svg" alt="Chevron right" />
  </IconTile>
  <IconTile label="Chevron up" meta={["expand_less", "24px"]}>
    <img src="/docs/iconography/chevron-up.svg" alt="Chevron up" />
  </IconTile>
  <IconTile label="Chevron down" meta={["expand_more", "24px"]}>
    <img src="/docs/iconography/chevron-down.svg" alt="Chevron down" />
  </IconTile>
  <IconTile label="Volume up" meta={["volume_up", "24px"]}>
    <img src="/docs/iconography/volume-up.svg" alt="Volume up" />
  </IconTile>
  <IconTile label="Volume off" meta={["volume_off", "24px"]}>
    <img src="/docs/iconography/volume-off.svg" alt="Volume off" />
  </IconTile>
  <IconTile label="Play" meta={["play_arrow", "24, 32px"]}>
    <img src="/docs/iconography/play.svg" alt="Play" />
  </IconTile>
  <IconTile label="Pause" meta={["pause", "24px"]}>
    <img src="/docs/iconography/pause.svg" alt="Pause" />
  </IconTile>
  <IconTile label="Fullscreen" meta={["fullscreen", "24px"]}>
    <img src="/docs/iconography/fullscreen.svg" alt="Fullscreen" />
  </IconTile>
  <IconTile label="Fullscreen exit" meta={["fullscreen_exit", "24px"]}>
    <img src="/docs/iconography/fullscreen-exit.svg" alt="Fullscreen exit" />
  </IconTile>
</IconTileContainer>

</ContentSection>

<ContentSection>

<SectionTitle title="Social Icons" />

<IconTileContainer>
  <IconTile label="Copy link">
    <img
      src="/docs/iconography/social-copy-link.svg"
      alt="Copy link"
      className="size-10"
    />
  </IconTile>
  <IconTile label="X (Twitter)">
    <img
      src="/docs/iconography/social-x.svg"
      alt="X (Twitter)"
      className="size-10"
    />
  </IconTile>
  <IconTile label="WhatsApp">
    <img
      src="/docs/iconography/social-whatsapp.svg"
      alt="WhatsApp"
      className="size-10"
    />
  </IconTile>
  <IconTile label="LinkedIn">
    <img
      src="/docs/iconography/social-linkedin.svg"
      alt="LinkedIn"
      className="size-10"
    />
  </IconTile>
</IconTileContainer>

</ContentSection>

<ContentSection>

<SectionTitle title="Number Label" />

<IconTileContainer>
  <IconTile>
    <img
      src="/docs/iconography/number-1.svg"
      alt="Number label 1"
      className="size-8"
    />
  </IconTile>
  <IconTile>
    <img
      src="/docs/iconography/number-2.svg"
      alt="Number label 2"
      className="size-8"
    />
  </IconTile>
  <IconTile>
    <img
      src="/docs/iconography/number-3.svg"
      alt="Number label 3"
      className="size-8"
    />
  </IconTile>
  <IconTile>
    <img
      src="/docs/iconography/number-4.svg"
      alt="Number label 4"
      className="size-8"
    />
  </IconTile>
  <IconTile>
    <img
      src="/docs/iconography/number-5.svg"
      alt="Number label 5"
      className="size-8"
    />
  </IconTile>
</IconTileContainer>

</ContentSection>

---

Previous: [Colors](https://brand.zypsy.com/docs/colors)  
Next: [Website](https://brand.zypsy.com/docs/website)