Pebble - A free funky formalicious icon set for React (& plain ol' SVG & PNG)

Overview

pebble_2020

Pebble

A free funky formalicious icon set for React (& plain ol' SVG & PNG)

Pebble is an icon set that aims for a friendly character. There's no real demographic, no target use case or application for this set:
it's mainly intended as a counterpart to all the clean, geometric sets out there. Sometimes, your design could use a little fun(k): that's where Pebble comes in.

How to use Pebble

Pebble is offered as plain SVG, PNG, or as React components (built with SVGR). Either clone the repo, or install it with Yarn:

yarn add pebble-icons

or NPM:

npm install pebble-icons

Import your icon(s) of choice, then add them like any other React component. You can add the color prop to set your own fill (default white): there's no stroke in any of them.

">
import { Leaf } from "pebble-icons"


What's in it?

There's about 160 icons so far, so to much to list. Look at the grid on the homepage to find the icon you need.

Questions / requests?

Just leave an issue on this repo. However, Pebble is just a little thing I did on the side so I'm not making any promises :)

Mad props

  • @huntercaron for helping getting the package ready for use in Framer
You might also like...

Funkytooltips - A jQuery plugin to create funky tooltips

Funkytooltips Funkytooltips is a jQuery plugin to generate tooltips based on the data contained in HTML tags. Installation The plugin can be installed

Apr 17, 2021

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

Promisified thunk with caching (pronounced "funky")

phunky phunky (promisified thunk, pronounced funky) is yet another thunk-inspired library, to delay a calculation until its result is needed, but also

Oct 14, 2022

Plain functions for a more functional Deku approach to creating stateless React components, with functional goodies such as compose, memoize, etc... for free.

Plain functions for a more functional Deku approach to creating stateless React components, with functional goodies such as compose, memoize, etc... for free.

"Keo" is the Vietnamese translation for glue. Plain functions for a more functional Deku approach to creating stateless React components, with functio

Sep 24, 2022

Vue-hero-icons - A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/heroicons, as Vue 2 functional components.

vue-hero-icons For Vue3, install the official package @heroicons/vue A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/her

Dec 16, 2022

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Jan 3, 2023

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Jan 3, 2023

Converts geojson to svg string given svg viewport size and maps extent.

geojson2svg Converts geojson to svg string given svg viewport size and maps extent. Check world map, SVG scaled map and color coded map examples to de

Dec 17, 2022

The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.

Wobbly Slideshow Effect The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Sna

Jul 27, 2022

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

Jan 2, 2023

Pure CSS animated 3D Super Mario Icon

Pure CSS Super Mario This is the transferred source of a little sideproject I did in 2010. I initially did this without any CSS preprocessor and event

Apr 15, 2021

Mobile icon generator

mobicon-cli Mobile app icon generator Install $ npm install --global mobicon-cli Note: Make sure to install GraphicsMagick as well. Usage $ mobicon -

Dec 8, 2022

Icon Ultimate Media Viewer

 Icon Ultimate Media Viewer

Ultimate Media Viewer View everything. Supported Images Audio Videos Documents Models PNG MP4 MD GLB JPG WEBM PDF GIF M3U8 SVG 3GP WEBP ICO Download R

May 23, 2022

Spicetify extension to add the icon of a playlist in front of the playlist the playlist list

Spicetify extension to add the icon of a playlist in front of the playlist the playlist list

Spicetify extension to add the icon of a playlist in front of the playlist the playlist list

Dec 20, 2022

Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options e.g custom text or HTML message, duration, custom class, toggle close button, position, custom close icon and backgorund color.

Pure Javascript Toaster Requires Nothing Demo Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options

Jun 21, 2022

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Module SonarCloud Status ag-grid-community ag-grid-enterprise AG Grid AG Grid is a fully-featured and highly customizable JavaScript data grid. It del

Dec 30, 2022
Comments
  • Framer Icon Fixes

    Framer Icon Fixes

    Adding a build process that should allow for usage of the icons in Framer. Before publishing run npm run build.

    The react folder has been removed as it will be generated at build time as well

    opened by huntercaron 0
Releases(1.0.2)
  • 1.0.2(Jan 23, 2022)

    What's Changed

    • Create LICENSE by @maxsteenbergen in https://github.com/maxsteenbergen/pebble-icons/pull/1
    • Framer Icon Fixes by @huntercaron in https://github.com/maxsteenbergen/pebble-icons/pull/2

    New Contributors

    • @maxsteenbergen made their first contribution in https://github.com/maxsteenbergen/pebble-icons/pull/1
    • @huntercaron made their first contribution in https://github.com/maxsteenbergen/pebble-icons/pull/2

    Full Changelog: https://github.com/maxsteenbergen/pebble-icons/commits/1.0.2

    Source code(tar.gz)
    Source code(zip)
Spicetify extension to add the icon of a playlist in front of the playlist the playlist list

Spicetify extension to add the icon of a playlist in front of the playlist the playlist list

Jeroen 22 Dec 20, 2022
An easy-to-use jQuery plugin that allows the user to pick an icon from a responsive icon browser and shows the corresponding icon class in an input element.

Font Awesome Browser An easy-to-use jQuery plugin that allows the user to pick an icon from a responsive icon browser and shows the corresponding icon

Gianluca Chiarani 1 May 1, 2021
🍎Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons

IconPark English | 简体中文 Introduction IconPark gives access to more than 2000 high-quality icons, and introduces an interface for customizing your icon

Bytedance Inc. 6.8k Jan 5, 2023
A Javascript library to export svg charts from the DOM and download them as an SVG file, PDF, or raster image (JPEG, PNG) format. Can be done all in client-side.

svg-exportJS An easy-to-use client-side Javascript library to export SVG graphics from web pages and download them as an SVG file, PDF, or raster imag

null 23 Oct 5, 2022
svg react icons of popular icon packs

React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons

null 9k Jan 1, 2023
A simple little WordPress block that allows you add an SVG icon or graphic to your website.

A simple little WordPress block that allows you add an SVG icon or graphic to your website.

Nick Diego 43 Jan 4, 2023
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

Create, Export, Share, and Use any Shapes of your choice. View Demo · Report Bug · Request Feature ?? Introducing TryShape TryShape is an opensource p

TryShape 148 Dec 26, 2022
Fallback for SVG images by automatically creating PNG versions on-the-fly

SVGMagic - Cross browser SVG This repository is no longer actively mainted. It has proven to be very usefull back in 2013, but these days SVGs are sup

Dirk Groenen 596 Jul 27, 2022
Landscape Generator is An open Source web application that generates landscape drawings randomly, then gives you the ability to edit it and export it as SVG or PNG.

Landscape Generator ## About Landscape Generator is An open Source web application that generates landscape drawings randomly, then gives you the abil

null 9 Apr 15, 2022
This JavaScript class generates a placeholder image or default profile image as SVG or PNG

This JavaScript class generates a placeholder image or default profile image as SVG or PNG. You can use the following parameters in the constructor:

Nils Köpke 4 Oct 12, 2022