alert--smallalertarchive--smallarchivearrow-left--smallarrow-leftarrow-right--smallarrow-rightblock--smallblockcalendar--smallcalendarcamera--smallcameracheck--smallcheck-circle--smallcheck-circlecheckchevron-down--smallchevron-downchevron-left--smallchevron-leftchevron-right--smallchevron-rightchevron-up--smallchevron-upclock--smallclock-arrow--smallclock-arrowclockcog--smallcogconversation--smallconversationcopy--smallcopycreditcard--smallcreditcardcross--smallcross-circle--smallcross-circlecrossdownload--smalldownloadedit--smalleditexport--smallexportexternal-facebookexternal-facebookboxedexternal-flickrexternal-gmailexternal-instagramexternal-linkedinexternal-mediumexternal-messenger-outlined--smallexternal-messenger-outlinedexternal-outlookexternal-tumblrexternal-twitter-outlined--smallexternal-twitter-outlinedexternal-twitterexternal-yahooexternal-youtubefilter--smallfilterfolder--smallfolderglobe--smallglobegroups--smallgroupsheart--smallheart-outline--smallheart-outlinehearthide--smallhidehome--smallhomeinfo--smallinfoinvite--smallinvitelaunch-new-window--smalllaunch-new-windowlink--smalllinklocation-pin--smalllocation-pin-slashed--smalllocation-pin-slashedlocation-pinlocation-services--smalllocation-serviceslock--smalllockmail--smallmailmeetup-m--smallmeetup-mmessages--smallmessagesminus--smallminusnotifications--smallnotifications-badged--smallnotifications-badgednotifications-mute--smallnotifications-mutenotificationsoverflow--smalloverflowphoto-album--smallphoto-album-add--smallphoto-album-addphoto-albumplus--smallplus-circle--smallplus-circleplusprofile--smallprofilepulse--smallpulserefresh--smallrefreshreply--smallreplysearch--smallsearchsend--smallsendsent-messages--smallsent-messagesshow--smallshowstar--smallstartextblock--smalltextblockticket--smalltickettrash--smalltrashupdates--smallupdates
☰

Swarm Design System

SDS

Meetup logo

Icons

Our icons are a light and airy with rounded corners to resemble the nature of our Swarm logo. Icons help us clearly communicate when text isn’t enough. Our icon set was designed to complement our typography, and comes in two weights.

Engineers can use the Swarm icons package to build with the latest icons. Designers have access to these icons in our Sketch UI kit, which can be downloaded through Abstract.

Design guidelines

We created some guidelines to make it easier for us to create new icons that are visually consistent with the others.

Keylines

The keylines act as a grid for our icons, and they help us to maintain consistent space and proportions. We have two sets of keylines - the default keylines, and keylines for icons that are displayed at smaller sizes. The keylines for icons displayed at smaller sizes help us keep the icon shapes from becoming too dense and unreadable.

Download keyline templates

Default keylines

Default swarm-icons keylines

Small variant keylines

swarm-icons keylines for the small variants

Weight

To keep our icons feeling light and airy, we have use two weights. The default weight, and a lighter weight for icons that are displayed at smaller sizes. stroke width chart

Icon set

Give feedback

If this page is missing something or if you'd like to make an edit, you can:

  • open a PR in the Swarm Design System repo
  • file a ticket in JIRA
  • send us a message in the #design-systems Slack channel in Meetup's Slack team
Meetup home

Last updated Jan 01 2018, 6:00 PM