This is a littlebox icon

It's made entirely with CSS

Here's how littlebox icons work

A first element of the icon is set by styling .lb-camera in CSS.

A second element of the icon is set by styling .lb-camera::before in CSS.

The final element of the icon is set by styling .lb-camera::after in CSS.

Each littlebox icon is made up of three or fewer elements, but can be called with as a single element with class .lb-icon followed by the .lb-* class associated with the requested icon.

It's easy to include a littlebox icon in your project:

Step 1: Install littlebox through Bower or download the littlebox CSS files and initialize the plugin in your project (as well as Bootstrap, if not already initialized):

bower install littlebox


<link rel="stylesheet" type="text/css" href="lib/littlebox.min.css" />
<link rel="stylesheet" type="text/css" href="lib/bootstrap.min.css" />
    Compatibility for littlebox icons is still being tested. See the details on GitHub.
Step 2: Add a littlebox icon to your project. The same structure is used for any littlebox icon:

<div class="lb-icon lb-*"></div>

The littlebox icon set:

(If it has a orange dot, it scales by adding class .lb-*-lg or .lb-*-sm)

Flag icons

Payment icons

Setting colors is simple:

All littlebox icons are built as borders, to set your own color, simply set the icons border color in your CSS, like so:

.lb-*, .lb-*::before .lb-*::after {
     border-color: /*YOUR COLOR HERE*/
Use a preset color by adding an lb-*color* class to the littlebox icon.

If you like these littlebox icons, have feedback, have questions or want to see a particular littlebox icon made, please let me know.

Cabell MadduxHi, I'm Cabell. I started this project.

© Cabell Maddux, 2015