Last modified:

Bugcrowd’s UI icons, in SVG format.

Example of Icons - default

<BcIcons name='bugcrowdUnfilled' />

React documentation

Last modified:

When using BcIcons in your project for the first time, you’ll need to include the spritesheet at a high-level, eg:

import BcIconsSpritesheetPath from '@bugcrowd/bc-flair/dist/assets/icons/bc-icons-spritesheet.svg?url'

// TODO: Document me 🙏

You’ll only need to do this once, generally.

For more on the spritesheet setup, see the HTML section in this entry.

Using <BcIcons />

To include an icon into a view import it:

import { BcIcons } from '@bugcrowd/bc-elements'

Then use the name prop to pick the icon you’re after:

<BcIcons name='attach'>

<BcIcons /> props and features

namestringrequiredbugcrowdSelects icon from spritesheet.
sizestringoptionalN/AManually set icon size (in rems). Default of --local-font-size is $bc-leading * 1em.
isInlinedbooleanoptionalfalseSets inline-block and vertical-align: middle.
isParentColorbooleanoptionalfalseSets icon color variable to initial so it inherits the parent color. SassDoc: bc-icon--parent-color.
classNamestringoptionalN/AAdd custom CSS class(es).

The size prop’s default is N/A because left unset, <BcIcons /> will try to match the font-size of the parent block it is nested inside.


Last modified:

Understanding the spritesheet setup

This component draws the icon you wish from a generated SVG ‘spritesheet’ of all the icons.

The spritesheet is built by nesting SVGs with (unique) IDs for each icon so you can <use> them, literally. 🙂

You’ll want to include the spritesheet into project’s views at a high-level.

By importing the spritesheet into your project, the file will only be loaded once and will be cached.

This benefit also applies to multiple instances of the same icon: they all draw from the same single icon from the many defined in the SVG spritesheet file.

You have a variety of options to include the spritesheet in plain HTML/markup.

For React setups: see the React documentation section in this entry.

The spritesheet

We version control each icon as its own individual SVG file in Git.

We then use our spritesheet generator script, compiling them together into a single SVG spritesheet.

The assembled spritesheet looks like this:

<!-- bc-icons-spritesheet.svg -->
  <!-- Defs structural container -->
    <!-- the Activity feed icon: -->
    <svg id="activity-feed" viewBox="">
      <path fill="" d="" />
    <!-- the Android icon: -->
    <svg id="android" viewBox="">
      <path fill="" d="" />
    <!-- the (orange) Bugcrowd icon: -->
    <svg id="bugcrowd" viewBox="">
      <path fill="" d="" />
    <!-- the (transparent b) Bugcrowd icon: -->
    <svg id="bugcrowd-internal" viewBox="">
      <path fill="" d="" />
    <!-- etc. -->

The icon-* IDs here are auto-inserted by the spritesheet generator, using the individual icon filenames for the slugs.

The individual (source) SVGs

We store each icon as separate, individual files in Git.

Why individual icon source files? Because it gives developers flexibility and source access to individual icons. It also gives DS Maintainers fine-grained icon version control and file/code ownership.

Example individual icon source file:

<!-- bugcrowd-unfilled.svg -->
<svg viewBox="0 0 24 24">
  <path fill="currentColor" d="" />

All icons must have canvas viewBox dimensions of 24 by 24 (effectively pixels at 1:1 scaling).

Also notice the path element sets fill="currentColor". This allows dynamically setting icon colors via CSS, as the path’s color can now be inherited via the parent color property, relative to the location where the SVG is <use>d. 😎

Exceptions are limited and manually composed to maintain color contrast visibility across all background colors, between both the light and dark color themes.

Calling an icon and the resulting HTML

Call an icon from the spritesheet using <use>:

If you’re working in React this is simplified for you, eg. <BcIcons name='bugcrowd-unfilled' />.

That said, the markup to call an icon is fairly simple also:

<svg><use href="/host/path/to/spritesheet.svg#bugcrowd-unfilled"></use></svg>

<BcIcons /> abstracts <use> to do this and set some other properties for you.

The final resulting HTML, when rendered:

<span class="bc-icons">
    viewBox="0 0 24 24"
    <use href="./assets/bc-icons-spritesheet.svg#bugcrowd-unfilled"></use>

If the icon requires changing its (singular) color the component will append a BEM modifier/variant class which changes the color, which in turn is picked up by the SVG’s fill="currentColor".

For example, to color the orange Bugcrowd hexagonal logo mark, the .bc-icons--bugcrowd class sets the .bc-icons--local-color CSS Variable to our brand orange.

Caveats of <use>

SVGs cannot be loaded from a CDN when using <use>.

See In the case of CORS: CSS to the rescue.

Icon semantics (or lack thereof)

⚠️ These Icons are intentionally designed to be presentational-only, that is, they carry no semantic meaning.

Why are icons removed from the Accessibility Tree?

If the icon is used to carry important meaning and no text label is given, an accessible label or title needs to provided.

👉 See Accessibility section on this page.



Last modified:

👉 See the BcIcons Storybook entry of all icons.

The following table is hardcoded and will be auto-mapped in the future.

Icon namePurpose
activityFeedActivity feeds
agricultureAgriculture industry
androidTarget type: Android
apiTarget type: API
archiveArchive items
arrowDownArrow pointing down
arrowLeftArrow pointing left
arrowRightArrow pointing right
arrowUpArrow pointing up
attachFile attachments
automotiveAutomotive industry
bankBanking industry
biotechBiotech industry
blockerCreatedActive blockers
blockerResolvedResolved blockers
bookmarkBookmark a page
briefView brief
bugcrowdBugcrowd logo
bugcrowdUnfilledUnfilled Bugcrowd logo
calendarShow calendar date picker
cameraImage upload
cancelCancel or clear current action
cardCredit card
chevronDownOpen select
chevronUpCollapse select
clipboardCopy to clipboard
clockComplementing time selection
cloudCheckChanges saved
cloudCrossChanges not saved
cloudCloud based industry
computerSoftwareComputer software industry
constructionConstruction industry
dateComplementing date selection
deleteDelete or remove an item safe harbor icon safe harbor (partial)
downloadDownload an item to computer
downtrendIndicate downtrend
duplicateSubmission duplicate icon
ecommerceE-commerce industry
editEdit an item
educationEducational industry
electronicsElectronics industry
EngagementAsmASM engagement
engagementNgptNGPT engagement
engagementOnDemandOn-Demand Bug Bounty engagement
engagementOngoingOngoing Bug Bounty engagement
engagementPenTestPen Test engagement
engagementReconASM engagement
engagementSastSAST engagement
engagementVdpVDP engagement
errorError message icon
eyedropperColor picker UI
facebookFacebook logo
fileImageImage format file
fileOtherOther format file
fileVideoVideo format file
filterFilter items
financeFinance industry
fixSubmissions to be fixed or resolved
followFollow an engagement
forestryForestry industry
formatBoldAdd bold text formatting
formatCodeAdd code formatting
formatItalicAdd italic text formatting
formatLinkAdd link formatting
formatListBulletedBulleted list formatting
formatListNumberedNumbered list formatting
formatQuoteAdd quote formatting
gamesGames industry
githubGitHub logo icon
governmentGovernment industry
hardwareTarget type: Hardware or Hardware industry
healthcareHealthcare industry
helpHelp resources
hideHide item or visibility is limited
hospitalityHospitality industry
huntingAnimalWelfareHunting and animal welfare industry
infoInformational message icon
iosTarget type: iOS
iotTarget type: IoT or IoT industry
linkedInLinkedIn logo
locationLocation marker
maritimeMaritime industry
markdownMarkdown logo
menuHamburger menu
militaryMilitary industry
minusMinus or subtract
moreMore options
networkTarget type: Network
newTabOpen link in new tab
nonProfitNon-profit industry
oilGasOil and gas industry
paymentMethodPayment method selection
pentesterlabPentesterlab logo
pinPin item to top
plusPlus or add
previewPreview item
printPrint page
processingSubmission in new state or to be triaged
publicPublicly visible/not hidden
realEstateReal Estate industry
rearrangeRe-arrange or drag item
recycleRecycle item
requirementRequirement (unsatisfied) / ineligible icon
retailRetail industry
retestAttempt to reproduce a vulnerability
revealShow item or visibility is open
reviewSubmissions that need review
rewardSubmissions that need to be rewarded
scienceScience industry
searchSearch inputs
sendSend an item
settingsChange settings
sidebarSidebar section
ssoAuthenticated with SSO icon
stackexchangeStack Exchange logo icon
stackoverflowStack Overflow logo icon
subdirectorySubdirectory item
successSuccess message / requirement satisfied / eligible icon
supportSupport industry
targetTarget icon
taskListTask list icon
technologyTechnology industry
thumbsdownDown vote rating
thumbsupUp vote rating
thumbsupdownRate item
tourismTourism industry
transportationTransportation industry
twitterTwitter or ‘X’ logo
undoUndo an action
unfoldHorizontalLessCollapse an item horizontally
unfoldHorizontalMoreExpand an item horizontally
unfoldVerticalLessCollapse an item vertically
unfoldVerticalMoreExpand an item horizontally
unfollowUn-follow or stop following an engagement
unpinUnpin an item at the top
uptrendIndicate upward trend
userSingle user icon
userGroupGroup/multiple user icon
userSettingsUser or profile settings
utilitiesUtilities industry
warningWarning message icon
websiteTarget type: Website

Do’s and Don’ts using Icons

  • Icons should enhance, not overwhelm content — avoid overusing them.
  • Maintain a balance between iconography and textual content.
  • Prefer using icons additively to text because icons by themselves can be difficult to identify.


Last modified:

⚠️ Note the <BcIcons /> component has no semantic value as it is removed from the Accessibility Tree via aria-hidden="true" and role='none'.

Why are icons removed from the Accessibility Tree?

Therefore when icons are used alone, in absence of any nearby labelling text string, the parent node of the icon should receive an accessible label.

For example when using an ‘icon-only button’, give the <BcButton /> a clearly titled aria-label.

For more on labels see the Labels’ Accessibility section.

See also the HTML section on this page.

Further reading: CSS Tricks’ Accessible SVGs.


Last modified:

We use icons as visual markers to aid visual users to signify common and familiar actions.

These icons follow our general iconography guidance.

Why are icons removed from the Accessibility Tree?

The <BcIcons /> React component set aria-hidden='true', which alongside role='none' removes the icon from the Accessibility Tree (AT).

This marks the icon as having no semantic value in the page or UI.

We decided to do this and direct developers to provide accessible labelling or titles for icon-only instances themselves, for 2 main reasons:

  1. Because icons are often used inside interactive components which should be labelled, rather than a nested presentational icon.
  2. It radically reduces complexity of the React component.

We thereby avoid having to spread nested props or logic to support one of the 3+ mutually exclusive ways of labelling or setting <title>s.

We experimented nested SVG <title>s which behaved inconsistently in screen reader testing. Moreover, it is hard to predictably match source file <title> strings with downstream icon use cases, resulting in misnamed icons, which automated testing is poor if not incapable of catching for us.

Why SVGs?

SVGs are awesome! The decision to use SVGs follows web development best practices, offering many benefits:

  • SVGs scale better than raster graphics
    • This supports an accessibility requirement to allow users to page zoom up to 400%.
  • SVGs come in XML, perfect for storing with version control (Git)
  • SVGs are a web standard and widely supported by modern design tools
  • SVGs have great browser support

Why in-DOM SVGs?

In-DOM SVGs are the only way to set SVG fill colors dynamically via currentColor.

For detailed specifications see our Systematic Iconography — Spec (internal).

See also

Last modified: