Bugcrowd design system: Iconography

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:

• Icon component

  Add an icon either before or after a string, from a limited list of common icons.

• bc-btn--icon() Sass mixin and some of its associated helper classes

  A helper function and some pre-made helper classes for easily adding custom SVG icons to “buttons” in Sass code.

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.

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.

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].

Whitespace and exceptions

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

There are some exceptions, usually for legibility reasons: