Overview

'webmusic-icons' is icon-set for Web Music Applications.

midiappy midi xlr speakon rcapin tsphone trsphone trrsphone mic speaker headphone headset monitorsp stagemonitor recorder dj mixer effect amp vu tuner display desktoppc notepc tablet smartphone usbmemory stillcamera videocamera metronome tuningfork phonograph spectrum vinyl trumpet trombone sax flute clarinet frenchhorn tuba sousaphone keyboard piano organ grandpiano marimba kalimba harmonica contrabass shamisen sitar banjo violin acoguitar ovation es335 guitar telecaster stratocaster lespaul gibsonsg flyingv precisionbass stingraybass steinberger zo3 drums kick snare lotom hitom closehihat openhihat cymbal clap timbales bongo conga conga windchime cowbell agogo tanbourine maracas castanets djembe cajon callbell simmons sm57 sm58 beta57 c414 md421 55sh u87 c38stand jc120 twinreverb nanokey nanokontrol nanopad sl1200 o2r speaknspell pokemiku theremin kaosspad tenorion ewi3000 kx1 vltone microkorg moogiiic synthia prophet5 sp1200 sc88pro mpc1000 tb303 tr808 tr909 qy10 ms20 dx7 m1 d50 minimoog nordlead spaceecho 1176ln score pianoroll trebleclef bassclef sharp flat natural note1 note2 note4 note8 note16 note32 rest1 rest2 rest4 rest8 rest16 sine sawtooth square triangle noise envelope wave lpf hpf bpf notch peaking lowshelf highshelf



midiappy

midi

xlr

speakon

rcapin

tsphone

trsphone

trrsphone

mic

speaker

headphone

headset

monitorsp

stagemonitor

recorder

dj

mixer

effect

amp

vu

tuner

display

desktoppc

notepc

tablet

smartphone

usbmemory

stillcamera

videocamera

metronome

tuningfork

phonograph

spectrum

vinyl

trumpet

trombone

sax

flute

clarinet

frenchhorn

tuba

sousaphone

keyboard

piano

organ

grandpiano

marimba

kalimba

harmonica

contrabass

shamisen

sitar

banjo

violin

acoguitar

ovation

es335

guitar

telecaster

stratocaster

lespaul

gibsonsg

flyingv

precisionbass

jazzbass

stingraybass

steinberger

zo3

drums

kick

snare

lotom

hitom

closehihat

openhihat

cymbal

clap

timbales

bongo

conga

gong

windchime

cowbell

agogo

tanbourine

maracas

castanets

djembe

cajon

callbell

simmons

sm57

sm58

beta57

c414

md421

55sh

u87

c38stand

jc120

twinreverb

nanokey

nanokontrol

nanopad

sl1200

o2r

speaknspell

pokemiku

theremin

kaosspad

tenorion

ewi3000

kx1

vltone

microkorg

moogiiic

synthia

prophet5

sp1200

sc88pro

mpc1000

tb303

tr808

tr909

qy10

ms20

dx7

m1

d50

minimoog

nordlead

spaceecho

1176ln

score

pianoroll

trebleclef

bassclef

sharp

flat

natural

note1

note2

note4

note8

note16

note32

rest1

rest2

rest4

rest8

rest16

sine

sawtooth

square

triangle

noise

envelope

wave

lpf

hpf

bpf

notch

peaking

lowshelf

highshelf


Repository

Source code is available at :
GitHub repository

Usage

1. Use as PNG or SVG file

If you want to use these icons just as simple PNG or SVG file, click the icon in the list and download the PNG/SVG image file (This function is available for Chrome / Firefox / Edge only).

Following steps are for 'iron-icon' tag usage.

2. Install 'webmusic-icons.html' and depended files.

webmusic-icons can be Polymer custom icons with iron-iconset-svg. Though it need some preparation to use, icons can be used with simple <iron-icon> tag in HTML.

If you use bower, use the command below. It automatically solve the dependency and place files to 'bower_components' folder : 

  > bower install --save webmusic-icons
Otherwise, download 'webmusic-icons.html' from this link :
webmusic-icons.html

And follow links below for manually install other required files :
polymer 1.0
PolymerElements/iron-icon
PolymerElements/iron-iconset-svg

All files should be placed appropriate locations.

3. Load required libraries to your HTML

Add script & link tags for polymer, iron-icon, iron-iconset-svg and webmusic-icons to your HTML. In this description, all of the components assumes be placed under 'bower_components' folder by bower command. 

<!doctype html>
<html>
.
.
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
<link rel="import" href="bower_components/iron-iconset-svg/iron-iconset-svg.html">
<link rel="import" href="bower_components/webmusic-icons/webmusic-icons.html">
.
.
.
</html>

4. Use Icon

Insert a tag to your HTML like below. 'iconName' specifies the type of icon : 
<iron-icon icon="webmusic-icons:iconName"></iron-icon>

For example...

<iron-icon icon="webmusic-icons:midi"></iron-icon>

Add style-attribute if you want to change size or color :

<iron-icon icon="webmusic-icons:midi" style="width:100px;height:100px;color:magenta"></iron-icon>

License

CC0
To the extent possible under law, g200kg has waived all copyright and related or neighboring rights to webmusic-icons. This work is published from: Japan.

iconName :
Size : Color :
Rotate : Scale :
iron-icon Tag :
SVG representation :



Download