Styling: Icon System - cStreet Campaigns

Styling: Icon System


We've developed an icon system for Social Democrat that runs throughout the designed components. Icons are coded to represent different page types. 

On the homepage widgets, icons appear on the left-hand side of the widget beside the headline of the widget to highlight the action of the respective page.

Supporter nav buttons have icons on them that reflect the page types of the pages that the supporter nav buttons link to. 

On splash pages, a button with the custom icon will appear in the button at the bottom of the splash page to encourage users to click through.





  • Activity stream page:
  • Basic page:
  • Blog page:
  • Blog post page:
  • Calendar page:
  • Directory page:
  • Donation page:
  • Endorsement page:
  • Event page:
  • FAQ page:
  • Feedback page:
  • Leaderboard page:
  • Moneybomb page:
  • Petition page:
  • Press release page:
  • Question page:
  • Recruiting page:
  • Rules page:
  • Signup page:
  • Suggestion page:
  • Survey page:
  • Volunteer signup page:
  • Vote pledge page: