2.9.7






Icon

Icon Default


Close
<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
Icon Rotate


Close
<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 90, size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 180, size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 270, size: "2x" }) %>
Icon Flip


Close
<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "horizontal", size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "vertical", size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "both", size: "2x" }) %>
Icon Animation

Spin


Pulse


Close
<p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p>
<br/>
<p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>
Icon Pull


Close
<%= pb_rails("icon", props: { icon: "arrow-left", pull: "left", fixed_width: true, size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "arrow-right", pull: "right", fixed_width: true, size: "2x" }) %>
Icon Border


Close
<%= pb_rails("icon", props: { icon: "user", border: true, fixed_width: true, size: "2x" }) %>
Icon Sizes

Large

Small

XSmall



1x

2x

3x

4x

5x

6x

7x

8x

9x

10x


Close
<p><%= pb_rails("icon", props: { icon: "user", size: "lg" }) %> <span>Large</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "sm" }) %> <span>Small</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "xs" }) %> <span>XSmall</span></p>

<br/><br/>

<p><%= pb_rails("icon", props: { icon: "user", size: "1x" }) %> <span>1x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "2x" }) %> <span>2x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "3x" }) %> <span>3x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "4x" }) %> <span>4x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "5x" }) %> <span>5x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "6x" }) %> <span>6x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "7x" }) %> <span>7x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "8x" }) %> <span>8x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "9x" }) %> <span>9x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "10x" }) %> <span>10x</span></p>
Icon Default Dark


Close
<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
Available Props
id
data
classname
aria
children
border
fixed_width
flip
icon
inverse
list_item
pull
pulse
rotation
size
spin