Icons And Images

Icon

Icon Default

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

Icon Rotate

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

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

A spinner icon can show a user that something is loading or saving.

<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

Icon Pull can be used to indicate that the user can perform a pull action.

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

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

Icon Sizes

Large

Small

XSmall

10x

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

Tips for Custom Icons

When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:

Attributes must be React compatible e.g. xmlns:xlink should be xmlnsXlink and so on. There should be no hyphenated attributes and no semi-colons!.

Fill colors with regards to g or path nodes, e.g. fill="black", should be replaced with currentColor ala fill="currentColor". Your mileage may vary depending on the complexity of your SVG.

Pay attention to your custom icon's dimensions and viewBox attribute. It is best to use a viewBox="0 0 512 512" starting point when designing instead of trying to retrofit the viewbox afterwards!

You must source your own SVG into component/view you are working on. This can easily be done in programmatic and maintainable ways.

Rails

Sending the absolute path to the icon prop results in an <SVG> tag within the working view.

<%# SVG fill color inherited from css color property %>
<div class="icon-wrapper">

  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
  <p><%= pb_rails("icon", props: { icon: svg_url } ) %></p>
  <p><%= pb_rails("icon", props: { rotation: 90, icon: svg_url, size: "2x" } ) %></p>
  <p><%= pb_rails("icon", props: { spin: true, icon: svg_url, size: "3x" } ) %></p>
  <p><%= pb_rails("icon", props: { size: "5x", icon: svg_url } ) %></p>
  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", icon: svg_url } ) %></p>
</div>

Icon with FontAwesome Kit

Our Icon kit allows integration with FontAwesome's custom kit functionality out-of-the-box.

All you need to do is 3 things:
1) Import your custom-icon.js file as outlined in the FontAwesome docs.
2) Use our fontStyle prop called "fak" so that our Icon component knows you are using a "fa-kit" icon.
3) Pass in your FaKit name as a string to our icon prop (This is the name that you designated when you uploaded the icon on their site).

<%= pb_rails("icon", props: { icon: "powergon", font_style: "fak", fixed_width: true, size: "5x"  }) %>

Icon Color

Pass any text, status, data, product, or category Playbook color token to the color prop to change any icon's color.

<%= pb_rails("flex", props: { margin_bottom: "sm" }) do %>
    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", size: "2x" }) %>
    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", size: "2x" }) %>
    <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "product_5_background", size: "2x" }) %>
<% end %>

<%= pb_rails("flex", props: {}) do %>
    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "light", size: "2x" }) %>
    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "lighter", size: "2x" }) %>
    <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "link", size: "2x" }) %>
<% end %>

Icon Circle

Default

<%= pb_rails("icon_circle", props: {
  icon: "rocket"
}) %>

Size

<%= pb_rails("icon_circle", props: {
  icon: "rocket",
  size: "xxs"
}) %>
<br />
<%= pb_rails("icon_circle", props: {
  icon: "rocket",
  size: "xs"
}) %>
<br />
<%= pb_rails("icon_circle", props: {
  icon: "rocket",
  size: "sm"
}) %>
<br />
<%= pb_rails("icon_circle", props: {
  icon: "rocket",
  size: "md"
}) %>
<br />
<%= pb_rails("icon_circle", props: {
  icon: "rocket",
  size: "lg"
}) %>
<br />
<%= pb_rails("icon_circle", props: {
  icon: "rocket",
  size: "xl"
}) %>

Color

Customize your icon circle by passing one of our seven base colors to the variant prop: royal orange purple teal red yellow green

<%= pb_rails("icon_circle", props: {
  icon: "rocket",
  variant: "royal",
  size: "sm"
}) %>
<br />
<%= pb_rails("icon_circle", props: {
  icon: "rocket",
  variant: "orange",
  size: "sm"
}) %>
<br />
<%= pb_rails("icon_circle", props: {
  icon: "rocket",
  variant: "purple",
  size: "sm"
}) %>
<br />
<%= pb_rails("icon_circle", props: {
  icon: "rocket",
  variant: "teal",
  size: "sm"
}) %>
<br />
<%= pb_rails("icon_circle", props: {
  icon: "rocket",
  variant: "red",
  size: "sm"
}) %>
<br />
<%= pb_rails("icon_circle", props: {
  icon: "rocket",
  variant: "yellow",
  size: "sm"
}) %>
<br />
<%= pb_rails("icon_circle", props: {
  icon: "rocket",
  variant: "green",
  size: "sm"
}) %>

With Emoji

😁

😍

🎉

The Icon Circle also allows you to pass in an HTML emoji in place of an icon if needed. To do so, pass any emoji or its hexa/decimal ref (see here) as a string to the icon prop as shown in the code snippet below.

<%= pb_rails("icon_circle", props: {
  icon: "😁",
  size:"sm"
}) %>
<br />
<%= pb_rails("icon_circle", props: {
  icon: "&#128525;",
  size:"md",
  variant: "red"
}) %>
<br />
<%= pb_rails("icon_circle", props: {
  icon: '&#x1F389;',
  size: "lg",
  variant: "teal"
}) %>

Icon Stat Value

Default

64.18

Electric

days

deadline

<%= pb_rails("icon_stat_value", props: { icon: "lightbulb-on",
                                         text: "Electric",
                                         unit: "kw",
                                         value: 64.18
 }) %>
<br>
 <%= pb_rails("icon_stat_value", props: { icon: "calendar",
                                          text: "deadline",
                                          unit: "days",
                                          value: 24
 }) %>

Size

158.3

distance driven

158.3

distance driven

158.3

distance driven

<%= pb_rails("icon_stat_value", props: { icon: "car",
                                         size: "sm",
                                         text: "distance driven",
                                         unit: " mi",
                                         value: 158.3
 }) %>
 <br>
 <%= pb_rails("icon_stat_value", props: { icon: "car",
                                         size: "md",
                                         text: "distance driven",
                                         unit: " mi",
                                         value: 158.3
 }) %>
<br>
 <%= pb_rails("icon_stat_value", props: { icon: "car",
                                         size: "lg",
                                         text: "distance driven",
                                         unit: " mi",
                                         value: 158.3
 }) %>

Vertical

102.5

wkz

Radio

 <%= pb_rails("icon_stat_value", props: { icon: "broadcast-tower",
                                          orientation: "vertical",
                                          size: "sm",
                                          text: "Radio",
                                          unit: "wkz",
                                          value: 102.5
 }) %>

Color

0.39

Mercury

0.723

Venus

1.0

Earth

1.524

Mars

5.203

Jupiter

9.539

Saturn

19.18

Uranus

 <%= pb_rails("icon_stat_value", props: { icon: "globe-europe",
                                          text: "Mercury",
                                          unit: "AU",
                                          value: 0.39,
                                          variant:"royal"
 }) %>
 <br>
 <%= pb_rails("icon_stat_value", props: { icon: "planet-ringed",
                                          text: "Venus",
                                          unit: "AU",
                                          value: 0.723,
                                          variant:"purple"
 }) %>
 <br>
 <%= pb_rails("icon_stat_value", props: { icon: "planet-moon",
                                          text: "Earth",
                                          unit: "AU",
                                          value: 1.0,
                                          variant:"teal"
 }) %>
 <br>
 <%= pb_rails("icon_stat_value", props: { icon: "solar-system",
                                          text: "Mars",
                                          unit: "AU",
                                          value: 1.524,
                                          variant:"red"
 }) %>
 <br>
 <%= pb_rails("icon_stat_value", props: { icon: "globe-americas",
                                          text: "Jupiter",
                                          unit: "AU",
                                          value: 5.203,
                                          variant:"yellow"
 }) %>
 <br>
 <%= pb_rails("icon_stat_value", props: { icon: "globe-africa",
                                          text: "Saturn",
                                          unit: "AU",
                                          value: 9.539,
                                          variant:"green"
 }) %>
 <br>
 <%= pb_rails("icon_stat_value", props: { icon: "globe",
                                          text: "Uranus",
                                          unit: "AU",
                                          value: 19.18,
                                          variant:"orange"
 }) %>

Icon Value

Default

15m

<%= pb_rails("icon_value", props: {
  icon: "heart",
  text: "93"
}) %>

<br>

<%= pb_rails("icon_value", props: {
  icon: "comment",
  text: "5"
}) %>

<br>

<%= pb_rails("icon_value", props: {
  icon: "clock",
  text: "15m"
}) %>

Align

15m

<%= pb_rails("icon_value", props: {
  icon: "heart",
  text: "93"
}) %>

<br>

<%= pb_rails("icon_value", props: {
  icon: "comment",
  text: "5",
  align: "center"
}) %>

<br>

<%= pb_rails("icon_value", props: {
  icon: "clock",
  text: "15m",
  align: "right"
}) %>

User Badge

Default

Use these to represent what affiliation an employee has.

<%= pb_rails("user_badge", props: {
  badge: "veteran",
  size: "md"
}) %>

<br><br>

<%= pb_rails("user_badge", props: {
  badge: "million-dollar",
  size: "md"
}) %>

Sizes

<%= pb_rails("user_badge", props: {
  badge: "veteran",
  size: "sm"
}) %>

<br><br>

<%= pb_rails("user_badge", props: {
  badge: "veteran",
  size: "md"
}) %>

<br><br>

<%= pb_rails("user_badge", props: {
  badge: "veteran",
  size: "lg"
}) %>

Image

Default

<br/>
<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
<br/>
<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
<br/>
<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "md", url: "https://unsplash.it/500/400/?image=634" }) %>
<br/>
<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "lg", url: "https://unsplash.it/500/400/?image=634" }) %>
<br/>
<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
<br/>
<%= pb_rails("image", props: { alt: "picture of a misty forest", url: "https://unsplash.it/500/400/?image=634" }) %>

Rounded

<%= pb_rails("image", props: { alt: "", rounded: true, size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>

<br>

<%= pb_rails("image", props: { alt: "", rounded: true, size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>

<br>

<%= pb_rails("image", props: { alt: "", rounded: true, size: "md", url: "https://unsplash.it/500/400/?image=634" }) %>

<br>

<%= pb_rails("image", props: { alt: "", rounded: true, size: "lg", url: "https://unsplash.it/500/400/?image=634" }) %>

<br>

<%= pb_rails("image", props: { alt: "", rounded: true, size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>

Error Handling

Handle when an image fails to load or a broken link is passed. This is not neccessary most of the time.

Alter the display when the image fails to load:

Give it an error class:

Or hide it completely:

<style>
  .image-error:before {
    content: "Sorry, the image below seems to be broken.";
    display: block;
    margin-bottom: 10px;
  }
  .image-error {
    margin: 5px;
    padding: 5px;
    outline: 1px solid red;
  }
</style>

<%= pb_rails("body",
  props: {
    text: "Handle when an image fails to load or a broken link is passed. This is not neccessary most of the time."
  }
) %>

<br>
<br>

<%= pb_rails("body",
  props: {
    text: "Alter the display when the image fails to load:"
  }
) %>

<%= pb_rails("image",
  props: {
    alt: "This is the alt text!",
    on_error: "this.style.color = 'red'",
    rounded: true,
    size: "xs",
    url: "not_a_picture"
  }
) %>

<br>
<br>

<%= pb_rails("body",
  props: {
    text: "Give it an error class:"
  }
) %>

<%= pb_rails("image",
  props: {
    alt: "This is the alt text!",
    on_error: "this.classList.add('image-error')",
    padding_x: "none",
    rounded: true,
    size: "xs",
    url: "not_a_picture"
  }
) %>

<br>
<br>

<%= pb_rails("body",
  props: {
   text: "Or hide it completely:"
  }
) %>

<%= pb_rails("image",
  props: {
    alt: "This is the alt text!",
    on_error: "this.style.display = 'none'",
    rounded: true,
    size: "xs",
    url: "not_a_picture",
  }
) %>

Transition

To add a transition, simply use the transition prop and one of the three string options "fade", "blur", or "scale".

<%= pb_rails("flex") do %>
  <%= pb_rails("flex/flex_item", props: {fixed_size: "250px"}) do %>
    <%= pb_rails("select", props: {
    id: "transition-dropdown",
    label: "",
    blank_selection: "Select a Transition...",
    options: [
        {
          value: 'fade',
        },
        {
          value: 'blur',
        },
        {
          value: 'scale',
        },
    ]
    }) %>
  <% end %>
    <%= pb_rails("flex/flex_item") do %>
      <%= pb_rails("button", props: {classname: "button", text: "Load Image", margin_left: "sm", margin_top: "xs", disabled: true }) %>
    <% end %>
<% end %>
<%= pb_rails("image",  props: { classname: "transition-image", alt: "picture of a misty forest", url: "", on_error: "this.style.display = 'none'" }) %>

<script>
    window.addEventListener('DOMContentLoaded', () => {
        const button = document.querySelector(".button")
        const transitionDropdown = document.querySelector("#transition-dropdown")
        var option = ''

        transitionDropdown.addEventListener('change', function() {
          if (this.value === '') {
            button.className = button.className + ' _disabled'
          } else {
            button.removeAttribute("disabled");
            button.className = button.className.replace(/\_disabled/gi, '')
            option = this.value
          }
        });

        const updateTransition = (transition) => {
          const imageTransition = document.querySelector('.transition-image')
            imageTransition.removeAttribute("style")
            imageTransition.classList.remove("fade", "blur", "scale", "lazyloaded")
            imageTransition.classList.add(transition, "lazyload")
            imageTransition.src = "https://unsplash.it/500/400/?image=634"
        }
      
        button.addEventListener('click', function() {
          updateTransition(option)
        })
    });
</script>

Star Rating

Default

<%= pb_rails("star_rating", props: { padding_bottom: "xs" }) %>

<%= pb_rails("star_rating", props: { rating: 0.9, padding_bottom: "xs" }) %>

<%= pb_rails("star_rating", props: { rating: 1.5, padding_bottom: "xs" }) %>

<%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>

<%= pb_rails("star_rating", props: { rating: 4.2, padding_bottom: "xs" }) %>

<%= pb_rails("star_rating", props: { rating: 5, padding_bottom: "xs" }) %>

Color Options

<%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
<%= pb_rails("star_rating", props: { rating: 3, color_option: "primary", padding_bottom: "xs" }) %>
<%= pb_rails("star_rating", props: { rating: 3, color_option: "subtle", padding_bottom: "xs" }) %>

Background Options

<%= pb_rails("star_rating", props: { rating: 3, background_type: "fill", padding_bottom: "xs" }) %>
<%= pb_rails("star_rating", props: { rating: 3, background_type: "outline", padding_bottom: "xs" }) %>

Layout Options

2.8

3.0

1 of 5

<%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
<%= pb_rails("star_rating", props: { rating: 2.8, layout_option: "number", padding_bottom: "xs" }) %>
<%= pb_rails("star_rating", props: { rating: 3, layout_option: "number", padding_bottom: "xs" }) %>
<%= pb_rails("star_rating", props: { rating: 1, layout_option: "onestar", padding_bottom: "xs" }) %>

Number Config

<%= pb_rails("star_rating", props: { rating: 3, denominator: 3, padding_bottom: "xs" }) %>
<%= pb_rails("star_rating", props: { rating: 3, denominator: 4, padding_bottom: "xs" }) %>
<%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
<%= pb_rails("star_rating", props: { rating: 3, denominator: 6, padding_bottom: "xs" }) %>
<%= pb_rails("star_rating", props: { rating: 3, denominator: 7, padding_bottom: "xs" }) %>
<%= pb_rails("star_rating", props: { rating: 3, denominator: 8, padding_bottom: "xs" }) %>

Size Options

3.0 3 of 5

<%= pb_rails("star_rating", props: { rating: 3, size: "xs", padding_bottom: "xs" }) %>

<%= pb_rails("star_rating", props: { rating: 3, size: "sm", padding_bottom: "xs" }) %>

<%= pb_rails("star_rating", props: { rating: 3, size: "md", padding_bottom: "xs" }) %>

<%= pb_rails("star_rating", props: { rating: 3, size: "lg", padding_bottom: "xs" }) %>

<%= pb_rails("star_rating", props: { rating: 3, size: "lg", layout_option: "number", padding_bottom: "xs" }) %>

<%= pb_rails("star_rating", props: { rating: 3, size: "lg", layout_option: "onestar", padding_bottom: "xs" }) %>

Interactive

Add a Rating

<%= pb_rails("star_rating", props: { label: "Add a Rating", padding_bottom: "xs", variant: "interactive" }) %>

Default Value

<%= pb_rails("star_rating", props: { default_value: "2", padding_bottom: "xs", variant: "interactive" }) %>

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Github

Connect Chat