Last modified:

A SVG icon mark displayed inline before or after some text.

⚠️ This component is deprecated. Please use BcIcons (plural) instead.

Example of Icon - default

<div className="bc-flex bc-flex--wrap bc-helper-gap">
  <BcIcon variant='bugcrowdInternal'>bugcrowdInternal</BcIcon>
  <BcIcon variant='activityFeed'>activityFeed</BcIcon>
  <BcIcon variant='android'>android</BcIcon>
  <BcIcon variant='api'>api</BcIcon>
  <BcIcon variant='blockerCreated'>blockerCreated</BcIcon>
  <BcIcon variant='blockerResolved'>blockerResolved</BcIcon>
  <BcIcon variant='clock'>clock</BcIcon>
  <BcIcon variant='disclose'>disclose</BcIcon>
  <BcIcon variant='disclosePartial'>disclosePartial</BcIcon>
  <BcIcon variant='duplicate'>duplicate</BcIcon>
  <BcIcon variant='error'>error</BcIcon>
  <BcIcon variant='github'>github</BcIcon>
  <BcIcon variant='hardware'>hardware</BcIcon>
  <BcIcon variant='info'>info</BcIcon>
  <BcIcon variant='invisible'>invisible</BcIcon>
  <BcIcon variant='ios'>ios</BcIcon>
  <BcIcon variant='iot'>iot</BcIcon>
  <BcIcon variant='markdown'>markdown</BcIcon>
  <BcIcon variant='notification'>notification</BcIcon>
  <BcIcon variant='onDemand'>onDemand</BcIcon>
  <BcIcon variant='ongoing'>ongoing</BcIcon>
  <BcIcon variant='pentesterlab'>pentesterlab</BcIcon>
  <BcIcon variant='public'>public</BcIcon>
  <BcIcon variant='requirement'>requirement</BcIcon>
  <BcIcon variant='search'>search</BcIcon>
  <BcIcon variant='sso'>sso</BcIcon>
  <BcIcon variant='stackexchange'>stackexchange</BcIcon>
  <BcIcon variant='stackoverflow'>stackoverflow</BcIcon>
  <BcIcon variant='success'>success</BcIcon>
  <BcIcon variant='target'>target</BcIcon>
  <BcIcon variant='taskList'>taskList</BcIcon>
  <BcIcon variant='user'>user</BcIcon>
  <BcIcon variant='userGroup'>userGroup</BcIcon>
  <BcIcon variant='warning'>warning</BcIcon>
  <BcIcon variant='website'>website</BcIcon>

React documentation

Last modified:

⚠️ This component is deprecated. Please use BcIcons (plural) instead.

BcIcon props

variantstringoptionalSwitch between different variants.
asstringoptionalspanSwitch between defined html tags.
isAfterbooleanoptionalfalseTo place the icon on the right of the string.
isAlignedTopbooleanoptionalfalseTo anchor the icon to the top of a multi-line paragraph.
isTextHiddenbooleanoptionalfalseappend bc-icon--hidden-text class to the root element tag.
classNamestringoptionalAdd custom CSS class(es).
childrenstringoptionalSome text to show along the icon.

Possible values for as prop

spanShows the tag as span in DOM.
divShows the tag as div in DOM.
pShows the tag as p in DOM.

Possible values for variant prop

If the icon you are looking for is not available, please pass the class name to the className props.

name prop valuesDescription
activityFeedShows Activity feed icon.
androidShows Android icon.
apiShows API icon.
blockerCreatedShows BlockerCreated icon.
blockerResolvedShows BlockerResolved icon.
bugcrowdInternalShows BugcrowdInternal icon.
clockShows Clock icon.
discloseShows Disclose icon.
disclosePartialShows DisclosePartial icon.
duplicateShows Duplicate icon.
errorShows Error icon.
githubShows Github icon.
hardwareShows Hardware icon.
infoShows Info icon.
invisibleShows Invisible icon.
iosShows Ios icon.
iotShows Iot icon.
markdownShows Markdown icon.
notificationShows Notification icon.
onShows On icon.
onDemandShows OnDemand icon.
ongoingShows Ongoing icon.
pentesterlabShows Pentesterlab icon.
publicShows Public icon.
requirementShows Requirement icon.
searchShows Search icon.
ssoShows Sso icon.
stackexchangeShows Stackexchange icon.
stackoverflowShows Stackoverflow icon.
successShows Success icon.
targetShows Target icon.
taskListShows TaskList icon.
userShows User icon.
userGroupShows UserGroup icon.
warningShows Warning icon.
websiteShows Website icon.


Last modified:

Intended to be used as a wrapper, eg. on a div or a span. Nest p paragraphs or similar within.

Ensure the component remains semantic when removing associated descriptive text, that is, when using just the icon only.


Last modified:

The default icon used is a Bugcrowd logo (16×16 pixels) for noting programs managed by Bugcrowd and employee users in CrowdControl.

Note text colors within this component block use the subdued secondary color. This includes anchor colors.

The following variants are available:

  • --after: positioning variant to place the icon on the right of the string
  • --align-top: positioning variant to anchor the icon to the top of a multi-line paragraph
  • --hidden-text: visually hides text string. Ensure the string is nested in another child span
  • --disclose and --dislose--partial: safe harbor icons
  • --ongoing: infinity loop icon
  • --on-demand: lightning strike/flash icon
  • --markdown: markdown logo
  • --sso: authenticated with SSO icon
  • --duplicate: Submission duplicate icon
  • --info: informational message icon
  • --warning: warning message icon
  • --error: error message icon
  • --success: success message / requirement satisfied / eligible icon
  • --requirement: requirement (unsatisfied) / ineligible icon
  • --blocker-created: active blocker icon
  • --blocker-resolved: resolved blocker icon
  • --invisible: invisible (eye) icon
  • --search: magnifier icon
  • --notification: bell icon
  • --github: GitHub logo icon
  • --stackoverflow: Stack Overflow logo icon
  • --pentesterlab: Pentesterlab logo icon
  • --target: Target icon
  • --api: API icon
  • --hardware: Hardware icon
  • --ios: iOS icon
  • --android: Android icon
  • --iot: IoT icon
  • --website: Website icon
  • --user: Person icon
  • --user-group: Group icon
  • --public: Public icon
  • --bugcrowd-internal: Bugcrowd internal icon
  • --clock: Clock icon
  • --task-list: Task list icon
  • --activity-feed: Activity feed icon


Last modified:

Ensure icons absent of visual text labels or descriptions are given semantic titles.

In the rare case of a purely presentational icon set role='presentation' or aria-hidden.

Next use the aria-describedby attribute set on the described input with the value being the ID of the Hint block.


Last modified:

Careful use of iconography can visually assist users in scanning and identifying different data points, alerts, or the type of an action (eg. saving or deleting).

See also

Last modified: