Skip to content
Werklist Brand Guidelines

Iconography.

Hand-rolled 20×20 SVGs in Lucide family. Stroke 1.75, currentColor, round caps and joins. No icon library dependency. every icon ships as a local component. Friendly, not Lucide-default.

05.1

Canon

Viewbox20 × 20
StrokecurrentColor · 1.75
Caps / joinsround
Dependencynone. ships in src/components/Icon.tsx

05.2

Starter set

Fifteen icons cover every recruitment verb in use today. Extend only when a new verb appears.

  • MapPin

  • Clock

  • Users

  • Search

  • ArrowRight

  • Bookmark

  • Check

  • Chat

  • LinkIcon

  • Email

  • Download

  • Building

  • Shield

  • Globe

  • Spark

05.3

Rules

  • Do

    Use icons for every UI affordance

    Verbs, statuses, meta attributes. Always with currentColor.

  • Do

    Ship icons as local components

    Hand-rolled in src/components/Icon.tsx. no Lucide, no Heroicons, no library.

  • Don't

    Never use emoji as brand language

    Dating and cultural-load issues are too high for a CEE + multilingual surface.

  • Don't

    Never use a flag emoji

    Country-code chips replace flag emojis everywhere.

Icon authoring template

// 20×20, stroke 1.75, currentColor. Drop into src/components/Icon.tsx
export const Bookmark = () => (
  <svg width="20" height="20" viewBox="0 0 20 20"
       fill="none" stroke="currentColor"
       strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"
       aria-hidden="true">
    <path d="M5 3.5h10v13.5l-5-3-5 3V3.5Z" />
  </svg>
);

05.4

Country-code chip

Replaces flag emoji. Two-letter ISO in a 20×26 pill at rounded-[2px]. Live codes in production: HR, RS, SI, IT, PT, RO, BA.

HRRSSIITPTROBA

On dark

HRRSSIITPTROBA