Bugcrowd design system: Iconography

The Design system currently features a limited number of icons.

These are encoded as SVGs, in the CSS.

State

Guidance last updated: Sep 10, 2019

We do not yet have a single, systematic approach to custom iconography (internal ticket ref. BC-10889).

Besides bespoke usage (eg certain Buttons, Page alerts or the Navbar) see:

Style

Guidance last updated: Sep 10, 2019

The application has used various third-party icons:

  • FontAwesome icons
  • Material icons
  • various bespoke icons included in third-party React features

Our icons follow Material icon styles.

Stroke weight should maintain a minimum of 2 pixels.

Sizing

Guidance last updated: Sep 10, 2019

Viewport size

Our icons are designed as SVGs and optically optimised on a 24×24 pixel viewBox or grid.

Icons must be placed in square viewports.

Some bespoke icons may be optimised for larger viewBox.

24 by 24 grid diagram

Note some icons are placed inside blocks with reduced font sizes. This often sees the icon reduced from a 24× to 16× viewBox. Despite being optimised for the larger size, we test legibility by downscaling our icons.

Optical size

The optical size within the viewBox is nominally 20×20 [pixels].

Optical sizing diagram

Whitespace and exceptions

Most icons will fall within the 20×20 optical size region to maintain breathable padding.

Optical sizing diagram

There are some exceptions, usually for legibility reasons:

3 further examples of icons that optical region