Icon

Use icons to chunk content, add aesthetic appeal, or provide a visual cue. For quick reference, see technical parameters.

Example


                    [Icon icon="bulb" size="small"]
                

    <div id="bocss-icon-bulb" class="bocss-icon bocss-icon__small ">
        <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g>
	<path d="M12,3c-0.414,0-0.75-0.336-0.75-0.75v-1.5C11.25,0.336,11.586,0,12,0s0.75,0.336,0.75,0.75v1.5C12.75,2.664,12.414,3,12,3z
		"/>
	<path d="M1.5,12c-0.414,0-0.75-0.336-0.75-0.75S1.086,10.5,1.5,10.5H3c0.414,0,0.75,0.336,0.75,0.75S3.414,12,3,12H1.5z"/>
	<path d="M4.85,5.557c-0.195,0-0.379-0.074-0.52-0.209l-1.1-1.057C2.932,4.004,2.923,3.528,3.209,3.23C3.35,3.084,3.547,3,3.75,3
		C3.945,3,4.129,3.074,4.27,3.209l1.1,1.057C5.514,4.405,5.596,4.592,5.6,4.792c0.004,0.2-0.07,0.39-0.209,0.535
		C5.25,5.473,5.053,5.557,4.85,5.557z"/>
	<path d="M21,12c-0.414,0-0.75-0.336-0.75-0.75S20.586,10.5,21,10.5h1.5c0.414,0,0.75,0.336,0.75,0.75S22.914,12,22.5,12H21z"/>
	<path d="M19.15,5.557c-0.203,0-0.4-0.084-0.541-0.23c-0.287-0.299-0.277-0.774,0.021-1.061l1.1-1.057
		C19.871,3.074,20.055,3,20.25,3c0.203,0,0.4,0.084,0.541,0.23c0.287,0.299,0.277,0.774-0.021,1.061l-1.1,1.057
		C19.529,5.483,19.344,5.557,19.15,5.557z"/>
	<path d="M10.5,24c-1.241,0-2.25-1.009-2.25-2.25v-4.008c-2.319-1.307-3.784-3.832-3.75-6.498c0.071-4.13,3.359-7.421,7.487-7.495
		c4.146,0.073,7.44,3.362,7.513,7.487c0.035,2.67-1.429,5.198-3.75,6.506v4.008c0,1.241-1.009,2.25-2.25,2.25H10.5z M9.75,21.75
		c0,0.414,0.336,0.75,0.75,0.75h3c0.414,0,0.75-0.336,0.75-0.75V21h-4.5V21.75z M14.25,19.5V18h-4.5v1.5H14.25z M14.903,16.5
		c1.913-1.022,3.126-3.068,3.097-5.24c-0.059-3.311-2.7-5.951-6.013-6.01C8.692,5.309,6.057,7.952,6,11.267
		c-0.028,2.167,1.185,4.212,3.097,5.233H9.75v-3H9c-1.241,0-2.25-1.009-2.25-2.25C6.75,10.009,7.759,9,9,9s2.25,1.009,2.25,2.25V12
		h1.5v-0.75C12.75,10.009,13.759,9,15,9s2.25,1.009,2.25,2.25c0,1.241-1.009,2.25-2.25,2.25h-0.75v3H14.903z M12.75,16.5v-3h-1.5v3
		H12.75z M15,12c0.414,0,0.75-0.336,0.75-0.75S15.414,10.5,15,10.5s-0.75,0.336-0.75,0.75V12H15z M9,10.5
		c-0.414,0-0.75,0.336-0.75,0.75S8.586,12,9,12h0.75v-0.75C9.75,10.836,9.414,10.5,9,10.5z"/>
</g>
</svg>

    </div>

Parameters

Parameter Values Description
element_id user‑specified HTML ID for the icon
icon user‑specified Icon to display
image_id user‑specified Image ID from the Media Library
inline_svg true, false Specifies if the icon should be inline
preview true, false Enables icon preview
size small, medium, large, full Size of the icon, defaulting to "full"
theme rss Applies specific styles to the icon inline with a larger group of icons
title user‑specified Title of the icon for accessibility purposes

Available icons

Make sure to have all choices peer-reviewed by a designer.

add
adobe
alarm
alert-circle
alert-diamond
alert-triangle
analytics-bars
angle-brackets
arrow-button-down
arrow-button-left
arrow-button-right
arrow-button-up
arrow-circle-down
arrow-circle-left
arrow-circle-right
arrow-circle-up
arrow-down-1
arrow-down
arrow-left-1
arrow-left
arrow-right-1
arrow-right
arrow-up-1
arrow-up
bank
bitcoin-bubble
bluetooth
book-open
bookmarks-document
bookmarks
briefcase
bubble-question
bubble-typing
bulb
button-pause
button-play
calculator
calendar
cash-briefcase
chat
circle-check
circle-plus
circle-x
cog
conference
copy
cursor
design-board
dislike
document
dollar
empty
eye
graph-stats-ascend
graph-stats-descend
graph-stats
guillemotleft
guillemotright
house
lab-flask-experiment
laptop
left-quote
legal-hammer
like
menu
money-bag-dollar
multiple-users-1
office-desk
office-file-text
paper-edit
pencil
phone
pin
print
qr-code
question-circle
redo
remove
rss-feed
rss-feed2
rss-feed3
saving-safe
screen
search
send-email-2
send-email
share
shop
slider
star
study-book
study-owl
subtract
switch
time
touch-finger
wifi
wrench
Copied!