Skip to main content
Design system

Asset-Manager (WAM)

WPDS Asset-Manager (also known as WAM) manages all assets as raw SVG files. The asset manager is an independent package that allows for more streamlined management of our assets.

Table of contents

Getting started

How to use in Figma

To use WAM, please enable the WPDS-Asset-Manager in your libraries to gain access to all the icon glyphs and the logos. Please note if you are looking to use the icon as a component, we recommend using our icon component.

How to install

Note: WAM requires React to adopt into your project.

Example

When applying a fill to an icon we recommend using currentColor and let the parent style the fill color

Design principles

Visual style

The visual style of our icon set uses minimal lines and geometries. As a result, our icons use 1px lines and basic shapes to represent the glyph. The corners of most our icons are sharp and rarely round. Our icons geometry rarely use a fill. Still, when an icon has a fill, it is tied to a toggle state or required visual weight to satisfy hierarchy in the instances that they are.

Other assets

Other assets like logos do not follow any principle other than approved brand guidelines. Assets need to be clear in what they represent and have guidance around their use.

Icon design principles

Base size

There are four keyline shapes an icon can have as a base. All of the shapes require a 1 px padding on all sides.

Keyline shapes

There are four keyline shapes an icon can have as a base. All of the shapes require a 1 px padding on all sides.

  1. Square
  2. Circle
  3. Rectangle - vertical
  4. Rectangle - horizontal

Dive Deeper

In this video Design Lead, Peter Hershey shares our guiding principles when designing an icon for our design system.

Request

We welcome all requests for a new icon that may not exist in our current set. You can request an icon by emailing WPDS@washpost.com with the subject Icon request or using our slack flow ✏️ Icon request. After you submit, the process will be as follows:

  1. Your proposal request is submitted.
  2. There will be a review process in which the Icon task force will approve or deny the request.
  3. After approval, your icon will be placed in the backlog ready to picked up by any contributor or task force member.
  4. All icon requests are bundled in semi-monthly releases. On the 15th and end of every month. You can expect your icon to be released in the upcoming release cycle unless otherwise noted or if the request was submitted 5 days before the upcoming release.

FAQ

When can I use my icon?

WAM is released on a semi-monthly cycle. Once it is released in a cycle it will be available in both code and design through WAM.

What kind of icon proposals are denied?

The denial of a request can include but be limited to: Icons that repeat an intended function, Icons that are named the same, Icons that are offensive, hateful, or non-inclusive, Icons that do not serve an intended function, and icons whose intended function is too complex to represent visually.

Can I submit an icon design with the request to fast-track it?

Yes, you can submit a design for consideration. If it follows our contribution guideline and requirements for svgs, it can be used to bypass the five days before the release deadline requirement.

Contributing

For every submission, we require a review of the guideline checklist and follow the approval process. It will save you a lot of time before creating an icon to submit. So please review the following:

  1. All icons are unique and not a repeat of any existing icons. Please review our current icon set and double-check if there are any conflicts.
  2. Icons adhere to our Design principles.
  3. Icons work across all devices and platforms.
  4. Icons should be understandable by a global audience regardless of nationality, language, or device preference.

Making an icon

You can create the icon in any tool of your preference. There are a few things to consider & required when creating and designing an icon. They are as follow:

  1. Avoid using the line tool, and use the rectangle tool to avoid half pixels.
  2. Consider turning on pixel snapping if that is capable in your device of choice.
  3. Never use center borders as they create half pixels.
  4. Consider converting lines to outline paths.
  5. Ungroup icon layers and have the icon be the topmost layer.
  6. Ensure that the SVG file exports with a title that does not conflict with an existing icon name.
  7. Must use one of our keyline shapes.
  8. Combine all shapes and paths when possible.

Production ready

To be considered production-ready, all icon proposals must be an SVG file. Any icons that fail to meet the guidelines will be rejected and require a resubmission unless otherwise noted.

Approval process

Icons submitted to WAM must go through an approval process by WPDS. The process begins when a proposal has been made on our #WPDS slack channel or to our email WPDS@washpost.com. After receiving a proposal, it will undergo a review by our team. The approval of icons can take between 7-14 days. The length depends on how many revisions are needed and the number of icons in the proposal.

If your submission is accepted, the team will notify the proposal's approval. We will update WAM with the new icon(s) with the next release.

See all of our Icons or Logos

Edit this page on GitHub.
CommunityXTwittergithubGithubyoutubeYoutube