Icon

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

Example


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

Shortcode


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

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
preview user-specified Enables icon preview
size small, medium, large, full Size of the icon, defaulting to "full"
inline_svg user-specified Specifies if the icon should be inline
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!