149 Repositories
JavaScript svg-icons Libraries
Shopify Landing (Open source landing page shopify application)
SHOPIFY Open source landing page shopify application Configuration and Setup Key Features Technologies used 📸 Screenshots Author License Configuratio
🟢 Music player app with a modern homepage, fully-fledged music player, search, lyrics, song exploration features, search, popular music around you, worldwide top charts, and much more.
Music-player-app see the project here. 1. Key Features 2. Technologies I've used Key Features: 🟢 Fully responsive clean UI. 🟢 Entirely mobile respo
Easy-to-use js library for building graphs using svg.
LineChart Easy-to-use js library for building graphs using svg. Examples How to use Just add linechart.js from 'src' directory to your project. And ad
Icons for links. Logseq Plugin
"Awesome Links" plugin for Logseq Favicons for external links! 🡖 Pages icons for internal links 🡖 Page iconsicon::extended from Emoji to hundreds ic
Natura is a women-only gym that provides a safe, supportive environment for women of all shapes, sizes, and fitness levels
Natura is a women-only gym that provides a safe, supportive environment for women of all shapes, sizes, and fitness levels. Their goal is to help women feel confident and comfortable in their own skin, and to encourage them to lead healthy, active lifestyles.
Iconpicker for Bootstrap 5 icons
Iconpicker for Bootstrap 5 Usage 1 - Via cdn script src="https://unpkg.com/[email protected]/dist/iconpicker.js"/script 2 - Via npm npm
A library for panning and zooming elements using CSS transforms :mag:
Panzoom Examples Panzoom is a small library (~3.7kb gzipped) to add panning and zooming functionality to an element. Rather than using absolute positi
Login of app to remind to drink water, using Firebase tools like Firebase Auth and Firebase Firestore
Water Reminder Login App Menu Contents Motivation Final Images How to download the project and run it? Technologies utilized Dev 📌 Motivation This ap
Re-building @BizTech-Morocco website using Next.js and Tailwind CSS.
BizTech UI Moroccan Community for Business And Technology. We believe in community; together we can learn more and build a tech product faster. Websit
svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country.
svgMap svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country. Live demo: h
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
Pure CSS icons for popular file extensions
CSS file icons Pure CSS file icons for popular extensions lightweight css library Icons Demo Usage Include css-file-icons.css to html or install via n
A library of icons rendered purely in CSS and compiled using SASS.
Welcome to PureIcons.css: This is a library of icons rendered purely in CSS and compiled using SASSs. It is currently at 79 icons. More will be added
A sample GitHub clone : )
This is a Next.js project bootstrapped with create-next-app. live site - https://githubbyme.netlify.app/ Getting Started First, run the development se
A script that combines a folder of SVG files into a single sprites file and generates type definitions for safe usage.
remix-sprites-example A script that combines a folder of .svg files into a single sprites.svg file and type definitions for safe usage. Technical Over
An easy-to-use JavaScript library aimed at making it easier to draw on SVG elements.
svg-pen-sketch An easy-to-use JavaScript library aimed at making it easier to draw on SVG elements when using a digital pen (such as the Surface Pen).
CSS sprite to represent iOS shortcut icons
shortcut-icons A CSS sprite to represent iOS shortcut icons. Grab the stylesheet and the default (iOS 15) glyph set, and add a shortcut icon to your H
Basic styling to create calendar icons with pure HTML and CSS
Calendar Icon Basic styling to create calendar icons with pure HTML and CSS Usage Embed the CSS, and markup your date: link type="text/css" rel="styl
jQueryFileExplorer Inspired by jQueryFiletree. Most of the icons in the images folder are from jQueryFiletree.
jQueryFileExplorer Inspired by jQueryFiletree. Most of the icons in the images folder are from jQueryFiletree. Split.js is included and used to provid
A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements.
svg-pan-zoom-container A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements. No need to write scripts. Just ma
A lightweight JavaScript library for creating interactive maps and pretty data visualization.
Jsvectormap A lightweight Javascript library for creating interactive maps and pretty data visualization. Explore docs . Report bug · View demo · Down
Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.
Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de
Demonstration of liquid effect on HTML Canvas using Matter.js and SVG Filters (Blur + Contrast)
Canvas Liquid Effect Demonstration of liquid (or gooey) effect on HTML Canvas using Matter.js and SVG Filters (feGaussianBlur and feColorMatrix). DEMO
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:
D3 (or D3.js) is a JavaScript library for visualizing data using web standards
D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.
A lightweight graphic library providing 2d draw for Apache ECharts
ZRender A lightweight graphic library which provides 2d draw for Apache ECharts. Documentation https://ecomfe.github.io/zrender-doc/public/ License BS
JavaScript SVG parser and renderer on Canvas
canvg JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders
Holder renders image placeholders in browser using SVG
Holder Holder renders image placeholders in browser using SVG. Used by thousands of open source projects (including Bootstrap v3) and many other sites
Generates an image from a DOM node using HTML5 canvas
DOM to Image What is it dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in Java
🍎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
The iconic SVG, font, and CSS toolkit
Version 6 Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. Documentation Lear
SVG icons for popular brands
Simple Icons Over 2200 Free SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be ma
A curated collection of all country flags in SVG — plus the CSS for easier integration
flag-icons A curated collection of all country flags in SVG — plus the CSS for easier integration. See the demo. Install You can either download the w
Transform your icons with trendy animations.
iconate.js A call to transform your existing icons in a cool trendy way iconate.js is a tiny performant library for cross-browser icon transformation
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
Use 1400+ 3dicons within Figma or Figjam files quickly
3dicons Figma plugin Use 1400+ 3dicons within Figma or Figjam files quickly. The icons can be searched and filtered by color and angle. Figma Communit
A html・css・svg version of the Roland TR-909 (no sound)
VECTOR-909 Roland TR-909 drum-machine with only hand-made html, svg & css. 100% vector graphics. No textures. No sound engine ... just yet! Credits Lo
Smoothly interpolate between variations of SVG paths.
svg-path-morph A simple library for morphing between variations of SVG paths. Use svg-path-morph to smoothly morph between X variations of the same SV
📸 Generate image using HTML5 canvas and SVG
egami → image README | 中文文档 Generate image using HTML5 canvas and SVG Fork from html-to-image Installation pnpm pnpm add egami npm npm i egami Usage i
A html・css・svg version of the Roland TR-909 (no sound)
VECTOR-909 Roland TR-909 drum-machine with only hand-made html, svg & css. 100% vector graphics. No textures. No sound engine ... just yet! Credits Lo
🚀 Hero Icons for Flutjs
FLUT-HERO ⚔ Hero Icons for Flutjs Welcome! this package contains a set of icons widgets for Flutjs framework. All the svg source where made by the awe
Microverse Module 02 Project: This is an educational project to make a TodoList web application, where the users can add new todo, remove todo, edit todo, mark todo as completed, and remove all completed todo. Built with Webpack
todo-list This project is about building a list of To Do tasks. Where you can save your daily activities and help in daily evaluation. Live demo you v
Convert your SVG file directly to Flutter paths and prevent all the messing with bezier curves.
svg-to-flutter-path-converter Convert your SVG file directly to Flutter paths and prevent all the messing with bezier curves. Flutter Clutter The tool
Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable.
Custom icon library Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable. Upon each Material Design
Add icons to the AtCoder standings table according to ratings.
ac-rating-icon AtCoder のコンテスト順位表に、レーティングに対応したアイコンを追加するユーザースクリプトです。 アイデア元: https://twitter.com/e869120/status/1519310341024677888 灰色の細分化について 内部レート 0 以上
A zero-dependencies script to generate sponsors SVG from Patreon
sponsors A zero-dependencies script to generate sponsors SVG from Patreon. Usage Go to https://www.patreon.com/portal/registration/register-clients to
Pebble - A free funky formalicious icon set for React (& plain ol' SVG & PNG)
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
Generate colorful and temporarily identifiable SVGs with unique urls.
reptiles.dev Generate colorful and temporarily identifiable SVGs with unique urls.
📦 SVGs, fast and developer friendly in Angular
View settings all icons fixed size e.g. 30px button to align all icons distributes button to align all icons onscreen button to align all icons offscr
📦 SVGs, fast and developer friendly in Angular
View settings all icons fixed size e.g. 30px button to align all icons distributes button to align all icons onscreen button to align all icons offscr
🦸♀️ A super template for Next.js with a pack of incredible tools
Next-Plate 🦸♀️ A super template for Next.js with a pack of incredible tools 🌎 Translations 🚀 Demo → Deploy your own copy of this template in just
Showcase your skills on your Github readme or resumé with ease ✨
Showcase your skills on your GitHub or resumé with ease! Powered by Cloudflare Workers ⚡ Docs Example Specifying Icons Themed Icons Icons Per Line Cen
You only need 5 icons to meet most needs!
pwa-icons-generator You only need 5 icons to meet most needs! Don't believe me? Check out this awesome article written by the author of PostCSS and Au
Cloud function to generate basic icons, splash screens, and favicons.
Example: https://icogen.vercel.app/api/icon?color=white&padding=300&icon_id=1f1f1-1f1fa Can be used in Expo apps via app.json: { "expo": { "icon
A minimalist ToDo list app to add, update and remove tasks easily
To-do list is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. We will build a simple website that allows for doing that, and we will do it using ES6 and Webpack!
ICT (Ideas Come Together) - SPA Team Project
ICT (Ideas Come Together) - SPA Team Project This is a team project for our ReactJS module in our webdev program.
🎉 Sensoro Design SVG Icons
Sensoro Design Icons 语义化矢量图形库，提供了描述图标的抽象节点来满足对各种框架的适配。 ✨ 特性 📦 内置了丰富的图标资源 🎉 支持对 React、Vue、React Native、Angular 各种框架的适配 💻 使用 TypeScript 开发，提供完整的类型定义文
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
A recreation of a startpage posted on Reddit without the source, so I rewrote it in Next.js + Tailwind for the open source community.
Startpage "Figma Balls" Rewrite Why Did I Make This I saw a startpage posted on the subreddit r/startpages that I thought looked nice, but when I look
A Cloudflare Worker that translates TeX to SVG
TeX SVG Worker A Cloudflare Worker that translates TeX to SVG.
ChelseaJS - a Javascript library for creative, generative Coding
ChelseaJS is a Javascript library for creative, generative Coding. It's simple and intuitive syntax makes it easy for everyone (including non-coders)
Svaasthy project - a part of the Electrothon-4.0 Hackathon
Svaasthy View the presentaton The problems we address... The covid-19 crisis is drawing attention to the already overburdened public health systems in
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
Bookstore app built using React, Redux, and Styled Components
Bookstore Bookstore is an app that allows you to display a list of added books, add new book and remove a book. It is built using React, Redux, and St
Show multiple entity states, attributes and icons in a single card in Home Assistant's Lovelace UI
room-card Show multiple entity states, attributes and icons in a single card in Home Assistant's Lovelace UI NOTE: This card is base on the multiple-e
Open source privacy notice design patterns.
Design-first privacy notice template The Juro Privacy Notice is an open source project by https://juro.com and https://stefaniapassera.com/. A couple
Github action generates dynamic image URL for contributor list to display it!
github-action-contributors Github action generates dynamic image URL for contributor list to display it! Contributors Usage - run: mkdir -p build - na
Simple library to custom waveforms🎶
waveform-path LIVE DEMO WITH EXAMPLES Simple library to custom waveforms. Install NPM npm install waveform-path -s Download Download the last realease
A huge collection of SVG cryptocurrency logos
SVG Cryptocurrency Logos A collection of SVG (vector) logos of crytocurrency projects. Free logo API We also offer these logos via a free API. Our fre
🍱 Simple nodejs support for using icons!
🍱 node-icons Usage Checkout its unit tests to see complete usage with output! import Icons from "node-icons"; const icons = Icons({ // auto install
Lightweight, Material Design inspired go to top button. No dependencies. Pure Angular!
Angular ScrollTop Button Lightweight, Material Design inspired button for scroll-to-top of the page. No dependencies. Pure Angular! ✓ Angular 13, Ivy
🚀 Style and Component Library for Angular
ngx-ui Component & Style Library for Angular by Swimlane. Installing npm i @swimlane/ngx-ui --S Install the project's peer depencencies (moment, codem
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
JavaScript library to make drawing animation on SVG
vivus.js Demo available on http://maxwellito.github.io/vivus Play with it on Vivus Instant Vivus is a lightweight JavaScript class (with no dependenci
An easy way to animate SVG elements.
Walkway I loved the animations for the polygon ps4 review a few months back and decided to create a small library to re-create them (simple demo). It
Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility
Animate Plus Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and
Making Animation Simple
Just Animate 2 Making Animation Simple Main Features Animate a group of things as easily as a single thing Staggering and delays Chainable sequencing
Animator Core is the runtime and rendering engine for Haiku Animator and the components you create with Animator
Animator Core is the runtime and rendering engine for Haiku Animator and the components you create with Animator. This engine is a dependency for any Haiku Animator components that are run on the web.
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
Vue-crypto-dashboard - Cryptocurrency Dashboard made with Vue
Vue Crypto Dashboard A Cryptocurrency Dashboard build with Vue JS, PWA enabled, Binance Websocket API for realtime price, amChart for displaying histo
Worldwide-covid-statistics - covid-19 tracker developed using Reactjs, Axios , chartjs, material icons
Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np
A weather app done with React. Allows you to make a search for the current weather by simply typing "common knowledge" cities and save them to favourites on local storage.
Simpliest Weather React-App A weather app done with React. Allows you to make a search for the current weather by simply typing "common knowledge" cit
👉 Built my first React JS project "ToDo" webapp using some Features and Icons from Material UI.
# Getting Started with Create React App This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). ## Avai
Renders and SVG schema of SARS-CoV-2 clade as defined by Neststrain
ncov-clade-schema https://ncov-clades-schema.vercel.app/ Visualizes current tree of SARS-CoV-2 clades. Allows to generate an SVG image of this tree. C
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.
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
A daily print-and-play roguelike adventure you can play offline.
Chronicles of Stampadia A print-and-play roguelike with a new adventure every day! Play today's adventure | Read the manual | Learn how to play | Disc
Reduce the size of SVGs
Oh My SVG Reduce the size of SVGs About Oh My SVG let you export unoptimized SVG files into smaller versions. Under the hood, it uses SVGO to remove o
Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.
Crosshair Mouse Cursor Distortion Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hov
📊 Interactive JavaScript Charts built on SVG
A modern JavaScript charting library to build interactive charts and visualizations with simple API. Our Partner ApexCharts is now a partner of Fusion
Apache ECharts is a powerful, interactive charting and data visualization library for browser
Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly
A lightweight 3D game engine for the web.
A lightweight 3D game engine for the web. Built with three.js and cannon-es.
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
Create cool animated SVG spinners, loaders and other looped animations in seconds
SVG Circus SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds. Developing To run a local SVG
The Illusion of Life: An SVG Animation Case Study
svgAnimation.js is a Snap.svg plugin used to create complex animations from simple SVGs svgAnimation takes the complexity out of creating Snap.svg ani
Lightweight, simple to use jQuery plugin to animate SVG paths
jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every path inside the selected svg element, using
Lazy Line Painter - A Modern JS library for SVG path animation
Lazy Line Painter lazylinepainter.info A Modern JS library for SVG path animation Getting Started | Documentation | Examples | Lazy Line Composer Gett
An experimental SVG letter animation inspired by the Dribbble shot ["Shading Letters in Illustrator"](https://dribbble.com/shots/2943049-Shading-Letters-in-Illustrator) by Jake Bartlett's. Powered by Julian Garnier's [anime.js](http://anime-js.com/).
Fancy SVG Letter Animation An experimental SVG letter animation inspired by the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett's. Pow
Some shape morphing hover effects on images using SVG clipPath.
Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js
circle-svg-animation
Circle SVG Animation Plug css, js and just add short code in your html. Change the custom attribute data-percent and data-time for setting your percen