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> </div>
React documentation
Last modified:
⚠️ This component is deprecated. Please use BcIcons (plural) instead.
BcIcon props
| Prop | Type | Required? | Default | Description |
|---|---|---|---|---|
variant | string | optional | Switch between different variants. | |
as | string | optional | span | Switch between defined html tags. |
isAfter | boolean | optional | false | To place the icon on the right of the string. |
isAlignedTop | boolean | optional | false | To anchor the icon to the top of a multi-line paragraph. |
isTextHidden | boolean | optional | false | append bc-icon--hidden-text class to the root element tag. |
className | string | optional | Add custom CSS class(es). | |
children | string | optional | Some text to show along the icon. |
Possible values for as prop
| Value | Description |
|---|---|
span | Shows the tag as span in DOM. |
div | Shows the tag as div in DOM. |
p | Shows 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 values | Description |
|---|---|
activityFeed | Shows Activity feed icon. |
android | Shows Android icon. |
api | Shows API icon. |
blockerCreated | Shows BlockerCreated icon. |
blockerResolved | Shows BlockerResolved icon. |
bugcrowdInternal | Shows BugcrowdInternal icon. |
clock | Shows Clock icon. |
disclose | Shows Disclose icon. |
disclosePartial | Shows DisclosePartial icon. |
duplicate | Shows Duplicate icon. |
error | Shows Error icon. |
github | Shows Github icon. |
hardware | Shows Hardware icon. |
info | Shows Info icon. |
invisible | Shows Invisible icon. |
ios | Shows Ios icon. |
iot | Shows Iot icon. |
markdown | Shows Markdown icon. |
notification | Shows Notification icon. |
on | Shows On icon. |
onDemand | Shows OnDemand icon. |
ongoing | Shows Ongoing icon. |
pentesterlab | Shows Pentesterlab icon. |
public | Shows Public icon. |
requirement | Shows Requirement icon. |
search | Shows Search icon. |
sso | Shows Sso icon. |
stackexchange | Shows Stackexchange icon. |
stackoverflow | Shows Stackoverflow icon. |
success | Shows Success icon. |
target | Shows Target icon. |
taskList | Shows TaskList icon. |
user | Shows User icon. |
userGroup | Shows UserGroup icon. |
warning | Shows Warning icon. |
website | Shows Website icon. |
HTML
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.
Design
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 childspan--discloseand--dislose--partial: disclose.io 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
Accessibility
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.
Rationale
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: