• Format
  • Format Overview
  • Google Web FontsGoogle Web Fonts
    Change your page fonts. Over 500 fonts in library.
  • Page HeadersPage Headers
    Spice up your pages with these fancy title headers.
  • DropcapsDropcaps
    Add letter dropcaps.
  • Text HighlighterText Highlighter
    Highlight text paragraphs or important keywords.
  • Spoiler CodesSpoilers
    Create movie/data spoilers easily!
  • PullquotesPullquotes
    Create standout pullquotes.
  • BlockquotesBlockquotes
    Create testimonials and remarks.
  • Comment BoxesComment Boxes
    Create comment boxes & testimonials.
  • ListsLists
    Create fancy ordered lists with icon bullets.

  •  
  • Data GridTable Data Grid
    Organize data with sortable table data grids.
    Instant search, auto pagination, live calculation.
  • Table Styles ITable Styles I
    Stylish CSS table styles - various colors.
  • Table Styles IITable Styles II
    Stylish CSS table styles - grey tones.
  • Image Hover EffectsImage Hover Effects
    Add hover effects to your images.
  • Image CaptionsImage Captions
    Add captions to your images.
  • Image FramesImage Frames
    Add stylish frame borders to your images.
  • Form BeautifyForm Beautify
    Beautify your existing forms by simply adding a few lines of code.
  • DividersDividers
    Add line dividers/horizontal rulers.
  • Live HTML EditorLive HTML Editor
    Test CSS/JS & HTML codes in real-time.

  + View All In One Page
• Embed
  • Embed Overview
  • Instant.WebStoreInstant.WebStore
    Setup a simple ecommerce store & accept orders in just 10 minutes. No database required. 100% browser based.
  • Embed VideosEmbed Videos
    Embed YouTube, Vimeo, HTML 5, DM videos.
  • Embed PDF/Office FileEmbed PDF/Office File
    Embed Adobe PDF/MS Office files internally or externally on a webpage.
  • Social NetworksSocial Networks
    Add Facebook Likes/Box, Twitter Follow, Tweet, Google+ buttons, pInterest & more!
  • Twitter FeedsTwitter Feeds
    Add live twitter streams to your web pages. Just copy code + enter your twitter username!
  • Skype CallsSkype Integration
    Call & chat to your website visitors with easy Skype integration.
  • RSS FeedsRSS Feeds
    Display RSS Feeds on your website. Just copy code + enter a RSS URL!
  • Site ScreenshotGenerate Site Screenshot
    Dynamically generate a screenshot of any website URL by simply pasting some HTML codes on your webpage.
  • Bing/Google MapsBing/Google Maps
    Add interactive Google Maps/Bing Maps within minutes.
  • Flickr GalleryFlickr Gallery
    Stream photos from your flickr account to your webpage with jquery.
  • Scroll to TopScroll to Top
    Create a dynamic scroll to top button that appears near the bottom of pages.

  •  
  • Site SearchSite Search
    Add site search to your website. Powered by Google.
  • PayPal ButtonsPayPal Buttons
    Accept and process credit card payments with Paypal links.
  • Contact FormsContact Forms
    Create beautiful contact forms.
  • Popup NotificationsPopup Notifications
    Create popup message dialogs & notification bar alerts.
  • Message BoxesMessage Boxes
    Show alert/confirmation message boxes.
  • jQuery LightboxImage Lightbox
    Display content in popup modal dialogs with darkened background.
  • Image PreloaderImage Preloader
    Preload images with style (show animation loops).
  • Inline ContentInline Content
    Add scrollable inline HTML content windows.
  • Syntax HighlighterSyntax Highlighter
    Highlight your source code for easier viewing/source formatting. Supports HTML, CSS, Pascal, Java, JS, PHP, Python, ROR, VB, SQL, XML, C and more!
  • TooltipsTooltips
    Add popup tooltip hints to your links, images and forms!

  + View All In One Page
• Organize
  • Organize Overview
  • TabsTabs
    Organize content in tabbed containers.
  • ColumnsColumns
    Quickly add columns to your webpages.
  • AccordionsAccordions
    Organize data in tab groups that can expand/collapse.
  • TogglesToggles
    Create expandable Q&A toggles.
  • Pricing TablesPricing Tables
    Create stylish comparison tables.
  • PaginationPagination
    Create page numbers in your webpages.
  • BreadcrumbsBreadcrumbs
    Create navigation aids in your webpages.

  •  
  • RibbonsRibbons
    Mark your images or content with ribbons.
  • Horizontal CarouselHorizontal Carousel
    Add sliding carousels to your webpages.
  • Vertical CarouselVertical Carousel
    Add sliding carousels to your webpages.
  • CSS ShadowsCSS Shadows
    Create DIV box shadows.

  + View All In One Page
• Elements
  • Elements Overview
  • 3D Buttons3D Buttons
    3D style - clickable buttons.
  • Social ButtonsSocial Buttons
    Button styles from popular sites.
  • CSS3 ButtonsCSS3 Buttons
    CSS3 style - clickable buttons.
  • Flat ButtonsFlat Buttons
    Flat style - clickable buttons.
  • Elite ButtonsElite Buttons
    Multiple styles - clickable buttons.
  • Gradient ButtonsGradient Buttons
    Shaded style - clickable buttons.
  • Text ButtonsText Buttons
    Text style - clickable buttons.
  • Transparent ButtonsTransparent Buttons
    See thru - clickable buttons.
  • Background ImagesBackground Images
    Spice up your web page with new backgrounds.

  •  
  • Web IconsWeb Icons
    Over 450+ small icons for web content usage.
  • Web Icons IIWeb Icons II
    Over 450+ large icons for web content usage.
  • Web Icons IIIWeb Icons III
    Over 350+ large icons for web content usage.
  • Picotogram IconsPicogram Icons
    Over 400+ small royalty free icons for web usage.
  • Picotogram Icons IIPicogram Icons II
    Over 1300+ small royalty free icons for web usage.
  • Picotogram FontsPicogram Fonts
    Clean, minimalist font based icons.
  • Social IconsSocial Icons
    Add social buttons to your webpage.
  • Payment IconsPayment Icons
    Display credit card acceptance logos.
  • Seal IconsSeal Icons
    Improve conversion rates by displaying seal marks.

  + View All In One Page
• Sliders
  • Sliders Overview
  • Sliders OneBanner Sliders One
    Showcase your products using jQuery sliders.
  Coin Slider
  Dream Accordion
  Piecemaker 3D Slider
  Ken Burns Caption Slider
  Media Slider
  
  
  • Sliders TwoBanner Sliders Two
    Showcase your products using jQuery sliders.
  Ken Burns Panel Slider
  sCarousel Slider
  Flick Slider
  jFancyTile Slider
  Skitter Slider
  Responsive Grid Fixed
  
  
  • Sliders ThreeBanner Sliders Three
    Showcase your products using jQuery sliders.
  OneByOne Slider
  Nivo Slider
  Showcase Slider
  Broken Glass Slider
  Touchswipe Slider
  Panel Slider
  
  

  •  
  • Sliders FourBanner Sliders Four
    Showcase your products using jQuery sliders.
  ZoomFly Slider
  Focused Slider
  Camera Slider
  Slidorion Slider
  PhotoGrid Slider
  
  
  • Full Width SlidersFull Width Banner Sliders
    Showcase your products using jQuery sliders.
  Responsive Grid
  iOS Slider
  Parallax Slider
  Layered Slider
  MB Slider
  
  
  • Sliders Six SlidersLayered Sliders
    Showcase your products using jQuery sliders.
  Revolution Slider
  
  
  • Sliders SevenSliders Seven
    Flexible Responsive Slider.
  Flex Slider
  
  
  

  + View All In One Page
• Menus
  • Menus Overview
  • App MenuApp Menu
    Web application style dropdown navigation system.
  • Button MenuButton Menu
    Popup & dropdown web menus.
  • CSS3 MenuCSS3 Menu
    Navigation menus using pure CSS.
  • Dock MenuDock Menu
    OSX inspired web menus.
  • Elegant MenuElegant Menu
    Stylish navigation menus with fade effects.
  • Expander MenuExpander Menu
    Sidebar menu that auto expands/scrolls with the reader.
  • Extended MenuExtended Menu
    Stylish fade-in-out navigation system.
  • Flat MenuFlat Menu
    Clean, corporate navigation system.
  • iMenuiMenu
    Apple inspired web navigation menus.

  •  
  • Jump MenuJump Menu
    Web navigation system with jump out/slide effects.
  • Metro MenuMetro Menu
    Web navigation system with auto shrink/expand effects.
  • Mega MenuMega Menu
    Bevel style web navigation menus.
  • Responsive MenuResponsive Menu
    Web navigation system that fits on all devices (desktop, mobile, tablet).
  • Scroller MenuScroller Menu
    Navigation system with inbuilt scrolling.
  • Slideout MenuSlideout Menu
    Web navigation anchored to sidebar, slides out on hover.
  • Superfish MenuSuperfish Menu
    Professional web navigation system with fade effects.
  • Tree MenuTree Menu
    Folder tree/ explorer inspired navigation system.
  • Vertical MenuVertical Menu
    Vertically aligned web navigation system.

  + View All In One Page

Pictogram Fonts

Clean, minimalist font based icons.

Pictogram Standard

/ @ C

- Pictogram fonts use the @font-face tag to render icons
- Pictogram fonts can be set to any size, color or style via code.
- Picogram fonts work with all modern web browsers.
- Picogram fonts are 95% smaller in file size than image based icons.

Note: Pictogram fonts may not load in Firefox during local browsing mode due to security zone settings.

WebSymbols Pictograms

L0: - . / A X < > ? @ C
L1: # % & ' ( ) * + , - . / 0 : ;
L2: < > ? @ A B C D F H I J K L
L3: M N O P Q R S T U V W X Z [ \
L4: ] _ ` a b c d e f g h i j k l
L5: m n o p q r s t u v w x y z { }
L6: ~ ² ³ ¹ ×

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

L0: <span class="dc_pictogram_websymbols round" style="background-color:#666666;color:#fff;font-size:16px;" alt="disallow" title="disallow">-</span> <span class="dc_pictogram_websymbols round" style="background-color:#3c5a97;color:#fff;font-size:20px;" alt="tick" title="tick">.</span> <span class="dc_pictogram_websymbols round" style="background-color:#01aced;color:#fff;font-size:24px;" alt="tick circle" title="tick+circle">/</span> <span class="dc_pictogram_websymbols bevel" style="background-color:#da5232;color:#fff;font-size:28px;" alt="paperclip" title="paperclip">A</span> <span class="dc_pictogram_websymbols metro" style="background-color:#8abc2b;color:#fff;font-size:36px;" alt="this way circle" title="this way circle">X</span> <span class="dc_pictogram_websymbols" style="color:#cf480c;font-size:34px;" alt="back" title="back"><</span> <span class="dc_pictogram_websymbols" style="color:#3bafeb;font-size:34px;" alt="forward" title="forward">></span> <span class="dc_pictogram_websymbols" style="color:#d71212;font-size:34px;" alt="place" title="place">?</span> <span class="dc_pictogram_websymbols" style="color:#48a547;font-size:34px;" alt="email" title="email">@</span> <span class="dc_pictogram_websymbols" style="color:#1154a3;font-size:34px;" alt="cloud" title="cloud">C</span> L1: <span class="dc_pictogram_websymbols" alt="just be nice" title="just be nice">#</span> <span class="dc_pictogram_websymbols" alt="expand" title="expand">%</span> <span class="dc_pictogram_websymbols" alt="expand circle" title="expand circle">&</span> <span class="dc_pictogram_websymbols" alt="cross" title="cross">'</span> <span class="dc_pictogram_websymbols" alt="left pointer" title="left pointer">(</span> <span class="dc_pictogram_websymbols" alt="right pointer" title="right pointer">)</span> <span class="dc_pictogram_websymbols" alt="refresh" title="refresh">*</span> <span class="dc_pictogram_websymbols" alt="add" title="add">+</span> <span class="dc_pictogram_websymbols" alt="tag" title="tag">,</span> <span class="dc_pictogram_websymbols" alt="no" title="no">-</span> <span class="dc_pictogram_websymbols" alt="tick" title="tick">.</span> <span class="dc_pictogram_websymbols" alt="tick alt" title="tick circle">/</span> <span class="dc_pictogram_websymbols" alt="loading" title="loading">0</span> <span class="dc_pictogram_websymbols" alt="up" title="up">:</span> <span class="dc_pictogram_websymbols" alt="down" title="down">;</span> L2: <span class="dc_pictogram_websymbols" alt="left arrow" title="left arrow"><</span> <span class="dc_pictogram_websymbols" alt="right arrow" title="right arrow">></span> <span class="dc_pictogram_websymbols" alt="place" title="place">?</span> <span class="dc_pictogram_websymbols" alt="email" title="email">@</span> <span class="dc_pictogram_websymbols" alt="paperclip" title="paperclip">A</span> <span class="dc_pictogram_websymbols" alt="rss" title="rss">B</span> <span class="dc_pictogram_websymbols" alt="cloud" title="cloud">C</span> <span class="dc_pictogram_websymbols" alt="windows" title="windows">D</span> <span class="dc_pictogram_websymbols" alt="folder" title="folder">F</span> <span class="dc_pictogram_websymbols" alt="pointer" title="pointer">H</span> <span class="dc_pictogram_websymbols" alt="image" title="image">I</span> <span class="dc_pictogram_websymbols" alt="retweet" title="retweet">J</span> <span class="dc_pictogram_websymbols" alt="link" title="link">K</span> <span class="dc_pictogram_websymbols" alt="find" title="find">L</span> L3: <span class="dc_pictogram_websymbols" alt="film" title="film">M</span> <span class="dc_pictogram_websymbols" alt="love" title="love">N</span> <span class="dc_pictogram_websymbols" alt="love alt" title="love alt">O</span> <span class="dc_pictogram_websymbols" alt="time" title="time">P</span> <span class="dc_pictogram_websymbols" alt="avatar" title="avatar">Q</span> <span class="dc_pictogram_websymbols" alt="star" title="star">R</span> <span class="dc_pictogram_websymbols" alt="options" title="options">S</span> <span class="dc_pictogram_websymbols" alt="font" title="font">T</span> <span class="dc_pictogram_websymbols" alt="profile" title="profile">U</span> <span class="dc_pictogram_websymbols" alt="refresh" title="refresh">V</span> <span class="dc_pictogram_websymbols" alt="notice" title="notice">W</span> <span class="dc_pictogram_websymbols" alt="this way circle" title="this way circle">X</span> <span class="dc_pictogram_websymbols" alt="file cabinet" title="file cabinet">Z</span> <span class="dc_pictogram_websymbols" alt="down" title="down">[</span> <span class="dc_pictogram_websymbols" alt="ban" title="ban">\</span> L4: <span class="dc_pictogram_websymbols" alt="right" title="right">]</span> <span class="dc_pictogram_websymbols" alt="terminal" title="terminal">_</span> <span class="dc_pictogram_websymbols" alt="aim" title="aim">`</span> <span class="dc_pictogram_websymbols" alt="file" title="file">a</span> <span class="dc_pictogram_websymbols" alt="file" title="file">b</span> <span class="dc_pictogram_websymbols" alt="chat 1" title="chat 1">c</span> <span class="dc_pictogram_websymbols" alt="chat 2" title="chat 2">d</span> <span class="dc_pictogram_websymbols" alt="comments" title="comments">e</span> <span class="dc_pictogram_websymbols" alt="facebook" title="facebook">f</span> <span class="dc_pictogram_websymbols" alt="google+" title="google+">g</span> <span class="dc_pictogram_websymbols" alt="left arrow" title="left arrow">h</span> <span class="dc_pictogram_websymbols" alt="left arrow first" title="left arrow first">i</span> <span class="dc_pictogram_websymbols" alt="right arrow" title="right arrow">j</span> <span class="dc_pictogram_websymbols" alt="twitter" title="twitter">k</span> <span class="dc_pictogram_websymbols" alt="linkedin" title="linkedin">l</span> L5: <span class="dc_pictogram_websymbols" alt="vimeo" title="vimeo">m</span> <span class="dc_pictogram_websymbols" alt="bullets 1" title="bullets 1">n</span> <span class="dc_pictogram_websymbols" alt="bullets 2" title="bullets 2">o</span> <span class="dc_pictogram_websymbols" alt="bullets 3" title="bullets 3">p</span> <span class="dc_pictogram_websymbols" alt="bullets 4" title="bullets 4">q</span> <span class="dc_pictogram_websymbols" alt="rss" title="rss">r</span> <span class="dc_pictogram_websymbols" alt="skype" title="skype">s</span> <span class="dc_pictogram_websymbols" alt="twitter" title="twitter">t</span> <span class="dc_pictogram_websymbols" alt="stats" title="stats">u</span> <span class="dc_pictogram_websymbols" alt="B" title="B">v</span> <span class="dc_pictogram_websymbols" alt="unlock" title="unlock">w</span> <span class="dc_pictogram_websymbols" alt="lock" title="lock">x</span> <span class="dc_pictogram_websymbols" alt="youtube" title="youtube">y</span> <span class="dc_pictogram_websymbols" alt="corner" title="corner">z</span> <span class="dc_pictogram_websymbols" alt="down" title="down">{</span> <span class="dc_pictogram_websymbols" alt="up" title="up">}</span> L6: <span class="dc_pictogram_websymbols" alt="both ways" title="both ways">~</span> <span class="dc_pictogram_websymbols" alt="layout" title="layout">²</span> <span class="dc_pictogram_websymbols" alt="layout" title="layout">³</span> <span class="dc_pictogram_websymbols" alt="layout" title="layout">¹</span> <span class="dc_pictogram_websymbols" alt="cross" title="cross">×</span>

Modern Pictograms

L0: - . / A X ) * + , -
L1: ! # $ % ' ( ) * + , - . / 0 1
L2: 2 3 4 5 6 7 8 9 : ; < = > ? @
L3: A B C D E F G H I J K L M N O
L4: P Q R S T U V W X Y Z [ \ ]
L5: ^ _ ` a b c d e f g h i j
L6: k l n o m p q r s t u v w x
L7: y z { | } × ‐ — 

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113

L0: <span class="dc_pictogram_modern round" style="background-color:#666666;color:#fff;font-size:16px;" alt="up" title="up">-</span> <span class="dc_pictogram_modern round" style="background-color:#3c5a97;color:#fff;font-size:20px;" alt="cart" title="cart">.</span> <span class="dc_pictogram_modern round" style="background-color:#01aced;color:#fff;font-size:24px;" alt="down" title="down">/</span> <span class="dc_pictogram_modern bevel" style="background-color:#da5232;color:#fff;font-size:34px;" alt="camera" title="camera">A</span> <span class="dc_pictogram_modern metro" style="background-color:#8abc2b;color:#fff;font-size:44px;" alt="Icon" title="delete">X</span> <span class="dc_pictogram_modern" style="color:#cf480c;font-size:54px;" alt="award" title="award">)</span> <span class="dc_pictogram_modern" style="color:#3bafeb;font-size:54px;" alt="star" title="star">*</span> <span class="dc_pictogram_modern" style="color:#d71212;font-size:54px;" alt="plus" title="plus">+</span> <span class="dc_pictogram_modern" style="color:#48a547;font-size:54px;" alt="place" title="place">,</span> <span class="dc_pictogram_modern" style="color:#1154a3;font-size:54px;" alt="up" title="up">-</span> L1: <span class="dc_pictogram_modern" alt="notice" title="notice">!</span> <span class="dc_pictogram_modern" alt="note" title="note">#</span> <span class="dc_pictogram_modern" alt="money" title="money">$</span> <span class="dc_pictogram_modern" alt="check" title="check">%</span> <span class="dc_pictogram_modern" alt="stop" title="stop">'</span> <span class="dc_pictogram_modern" alt="tools" title="tools">(</span> <span class="dc_pictogram_modern" alt="award" title="award">)</span> <span class="dc_pictogram_modern" alt="star" title="star">*</span> <span class="dc_pictogram_modern" alt="plus" title="plus">+</span> <span class="dc_pictogram_modern" alt="place" title="place">,</span> <span class="dc_pictogram_modern" alt="up" title="up">-</span> <span class="dc_pictogram_modern" alt="cart" title="cart">.</span> <span class="dc_pictogram_modern" alt="down" title="down">/</span> <span class="dc_pictogram_modern" alt="volume low" title="volume low">0</span> <span class="dc_pictogram_modern" alt="volume mid" title="volume mid">1</span> L2: <span class="dc_pictogram_modern" alt="volume max" title="volume max">2</span> <span class="dc_pictogram_modern" alt="grid" title="grid">3</span> <span class="dc_pictogram_modern" alt="list" title="list">4</span> <span class="dc_pictogram_modern" alt="table" title="table">5</span> <span class="dc_pictogram_modern" alt="chart 1" title="chart 1">6</span> <span class="dc_pictogram_modern" alt="chart 2" title="chart 2">7</span> <span class="dc_pictogram_modern" alt="piechart" title="piechart">8</span> <span class="dc_pictogram_modern" alt="bell" title="bell">9</span> <span class="dc_pictogram_modern" alt="colon" title="colon">:</span> <span class="dc_pictogram_modern" alt="semicolon" title="semicolon">;</span> <span class="dc_pictogram_modern" alt="back" title="back"><</span> <span class="dc_pictogram_modern" alt="info" title="info">=</span> <span class="dc_pictogram_modern" alt="forward" title="forward">></span> <span class="dc_pictogram_modern" alt="question" title="question">?</span> <span class="dc_pictogram_modern" alt="at" title="at">@</span> L3: <span class="dc_pictogram_modern" alt="camera" title="camera">A</span> <span class="dc_pictogram_modern" alt="book" title="book">B</span> <span class="dc_pictogram_modern" alt="disc" title="disc">C</span> <span class="dc_pictogram_modern" alt="download" title="download">D</span> <span class="dc_pictogram_modern" alt="view" title="view">E</span> <span class="dc_pictogram_modern" alt="facebook" title="facebook">F</span> <span class="dc_pictogram_modern" alt="facebook alt" title="facebook alt">G</span> <span class="dc_pictogram_modern" alt="scanner" title="scanner">H</span> <span class="dc_pictogram_modern" alt="bin" title="bin">I</span> <span class="dc_pictogram_modern" alt="tag" title="tag">J</span> <span class="dc_pictogram_modern" alt="file" title="file">K</span> <span class="dc_pictogram_modern" alt="thumbs down" title="thumbs down">L</span> <span class="dc_pictogram_modern" alt="mp3 player" title="mp3 player">M</span> <span class="dc_pictogram_modern" alt="phone" title="phone">N</span> <span class="dc_pictogram_modern" alt="smartphone" title="smartphone">O</span> L4: <span class="dc_pictogram_modern" alt="video" title="video">P</span> <span class="dc_pictogram_modern" alt="tablet" title="tablet">Q</span> <span class="dc_pictogram_modern" alt="refresh" title="refresh">R</span> <span class="dc_pictogram_modern" alt="presentation" title="presentation">S</span> <span class="dc_pictogram_modern" alt="twitter" title="twitter">T</span> <span class="dc_pictogram_modern" alt="twitter alt" title="twitter alt">U</span> <span class="dc_pictogram_modern" alt="pad" title="pad">V</span> <span class="dc_pictogram_modern" alt="windows" title="windows">W</span> <span class="dc_pictogram_modern" alt="delete" title="delete">X</span> <span class="dc_pictogram_modern" alt="loudspeaker" title="loudspeaker">Y</span> <span class="dc_pictogram_modern" alt="paragraph" title="paragraph">Z</span> <span class="dc_pictogram_modern" alt="down arrow" title="down arrow">[</span> <span class="dc_pictogram_modern" alt="icons" title="icons">\</span> <span class="dc_pictogram_modern" alt="up arrow" title="up arrow">]</span> L5: <span class="dc_pictogram_modern" alt="rss" title="rss">^</span> <span class="dc_pictogram_modern" alt="building" title="building">_</span> <span class="dc_pictogram_modern" alt="wireless" title="wireless">`</span> <span class="dc_pictogram_modern" alt="newspaper" title="newspaper">a</span> <span class="dc_pictogram_modern" alt="quote" title="quote">b</span> <span class="dc_pictogram_modern" alt="telephone" title="telephone">c</span> <span class="dc_pictogram_modern" alt="print" title="print">d</span> <span class="dc_pictogram_modern" alt="pen" title="pen">e</span> <span class="dc_pictogram_modern" alt="profile" title="profile">f</span> <span class="dc_pictogram_modern" alt="profile alt" title="profile alt">g</span> <span class="dc_pictogram_modern" alt="video" title="video">h</span> <span class="dc_pictogram_modern" alt="cart" title="cart">i</span> <span class="dc_pictogram_modern" alt="love" title="love">j</span> L6: <span class="dc_pictogram_modern" alt="profile female" title="profile female">k</span> <span class="dc_pictogram_modern" alt="thumbs up" title="thumbs up">l</span> <span class="dc_pictogram_modern" alt="email" title="email">n</span> <span class="dc_pictogram_modern" alt="open" title="open">o</span> <span class="dc_pictogram_modern" alt="building" title="building">m</span> <span class="dc_pictogram_modern" alt="lock" title="lock">p</span> <span class="dc_pictogram_modern" alt="unlock" title="unlock">q</span> <span class="dc_pictogram_modern" alt="pencil" title="pencil">r</span> <span class="dc_pictogram_modern" alt="search" title="search">s</span> <span class="dc_pictogram_modern" alt="bird" title="bird">t</span> <span class="dc_pictogram_modern" alt="minimize" title="minimize">u</span> <span class="dc_pictogram_modern" alt="expand" title="expand">v</span> <span class="dc_pictogram_modern" alt="globe" title="globe">w</span> <span class="dc_pictogram_modern" alt="cross" title="cross">x</span> L7: <span class="dc_pictogram_modern" alt="zoom in" title="zoom in">y</span> <span class="dc_pictogram_modern" alt="zoom out" title="zoom out">z</span> <span class="dc_pictogram_modern" alt="clock" title="clock">{</span> <span class="dc_pictogram_modern" alt="line" title="line">|</span> <span class="dc_pictogram_modern" alt="timer" title="timer">}</span> <span class="dc_pictogram_modern" alt="delete" title="delete">×</span> <span class="dc_pictogram_modern" alt="up" title="up">‐</span> <span class="dc_pictogram_modern" alt="pyramid" title="pyramid">—</span> <span class="dc_pictogram_modern" alt="square" title="square"></span>

Raphael Pictograms

L0: % & ' ( ) d e f g h
L1: ! " # $ % & ' ( ) * + , - . /
L2: 0 1 2 3 4 6 7 8 9 : ; < = > ?
L3: @ A B C D E F G H I J K L M N O
L4: P Q R S T U V W [ \ ] ^ _ ' a b
L5: c d e f g h i j k l m n o p q r s
L6: t u v w x y z À Á Â Ã Ä Å Æ Ç È
L7: É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø
L8: Ù Ú Û Ü

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135

L0: <span class="dc_pictogram_raphael round" style="background-color:#666666;color:#fff;font-size:16px;" alt="thunderstorm" title="thunderstorm">%</span> <span class="dc_pictogram_raphael round" style="background-color:#3c5a97;color:#fff;font-size:20px;" alt="storm" title="storm">&</span> <span class="dc_pictogram_raphael round" style="background-color:#01aced;color:#fff;font-size:24px;" alt="some rain" title="some rain">'</span> <span class="dc_pictogram_raphael bevel" style="background-color:#da5232;color:#fff;font-size:34px;" alt="rain" title="rain">(</span> <span class="dc_pictogram_raphael metro" style="background-color:#8abc2b;color:#fff;font-size:44px;" alt="cloudy" title="cloudy">)</span> <span class="dc_pictogram_raphael" style="color:#cf480c;font-size:54px;" alt="firefox" title="firefox">d</span> <span class="dc_pictogram_raphael" style="color:#3bafeb;font-size:54px;" alt="internet explorer" title="internet explorer">e</span> <span class="dc_pictogram_raphael" style="color:#d71212;font-size:54px;" alt="opera" title="opera">f</span> <span class="dc_pictogram_raphael" style="color:#48a547;font-size:54px;" alt="chrome" title="chrome">g</span> <span class="dc_pictogram_raphael" style="color:#1154a3;font-size:54px;" alt="safari" title="safari">h</span> L1: <span class="dc_pictogram_raphael" alt="question" title="question">!</span> <span class="dc_pictogram_raphael" alt="info" title="info">"</span> <span class="dc_pictogram_raphael" alt="dollar" title="dollar">#</span> <span class="dc_pictogram_raphael" alt="temperature" title="temperature">$</span> <span class="dc_pictogram_raphael" alt="thunderstorm" title="thunderstorm">%</span> <span class="dc_pictogram_raphael" alt="cloudy" title="cloudy">&</span> <span class="dc_pictogram_raphael" alt="rain" title="rain">'</span> <span class="dc_pictogram_raphael" alt="storm" title="storm">(</span> <span class="dc_pictogram_raphael" alt="cloudy" title="cloudy">)</span> <span class="dc_pictogram_raphael" alt="sunny day" title="sunny day">*</span> <span class="dc_pictogram_raphael" alt="go back" title="go back">+</span> <span class="dc_pictogram_raphael" alt="merge one" title="merge one">,</span> <span class="dc_pictogram_raphael" alt="split" title="split">-</span> <span class="dc_pictogram_raphael" alt="turn" title="turn">.</span> <span class="dc_pictogram_raphael" alt="merge" title="merge">/</span> L2: <span class="dc_pictogram_raphael" alt="recycle" title="recycle">0</span> <span class="dc_pictogram_raphael" alt="smile" title="smile">1</span> <span class="dc_pictogram_raphael" alt="smile alt" title="smile alt">2</span> <span class="dc_pictogram_raphael" alt="alarm clock" title="alarm clock">3</span> <span class="dc_pictogram_raphael" alt="alarm clock alt" title="alarm clock alt">4</span> <span class="dc_pictogram_raphael" alt="world" title="world >5</span> <span class="dc_pictogram_raphael" alt="world alt" title="world alt">6</span> <span class="dc_pictogram_raphael" alt="world alt" title="world alt">7</span> <span class="dc_pictogram_raphael" alt="warning" title="warning">8</span> <span class="dc_pictogram_raphael" alt="left" title="left">9</span> <span class="dc_pictogram_raphael" alt="right" title="right">:</span> <span class="dc_pictogram_raphael" alt="leftright" title="leftright">;</span> <span class="dc_pictogram_raphael" alt="left" title="left"><</span> <span class="dc_pictogram_raphael" alt="right" title="right">=</span> <span class="dc_pictogram_raphael" alt="pencil" title="pencil">></span> <span class="dc_pictogram_raphael" alt="pen" title="pen">?</span> L3: <span class="dc_pictogram_raphael" alt="plus" title="plus">@</span> <span class="dc_pictogram_raphael" alt="minus" title="minus">A</span> <span class="dc_pictogram_raphael" alt="shirt" title="shirt">B</span> <span class="dc_pictogram_raphael" alt="icon 1" title="icon 1">C</span> <span class="dc_pictogram_raphael" alt="icon 2" title="icon 2">D</span> <span class="dc_pictogram_raphael" alt="document" title="document">E</span> <span class="dc_pictogram_raphael" alt="paper" title="paper">F</span> <span class="dc_pictogram_raphael" alt="plug" title="plug">G</span> <span class="dc_pictogram_raphael" alt="ice" title="ice">H</span> <span class="dc_pictogram_raphael" alt="tag" title="tag">I</span> <span class="dc_pictogram_raphael" alt="tools" title="tools">J</span> <span class="dc_pictogram_raphael" alt="profiles" title="profiles">K</span> <span class="dc_pictogram_raphael" alt="profiles" title="profiles">L</span> <span class="dc_pictogram_raphael" alt="email" title="email">M</span> <span class="dc_pictogram_raphael" alt="image" title="image">N</span> <span class="dc_pictogram_raphael" alt="chat question" title="chat question">O</span> L4: <span class="dc_pictogram_raphael" alt="chat quote" title="chat quote">P</span> <span class="dc_pictogram_raphael" alt="chat" title="chat">Q</span> <span class="dc_pictogram_raphael" alt="chat question" title="chat question">R</span> <span class="dc_pictogram_raphael" alt="house" title="house">S</span> <span class="dc_pictogram_raphael" alt="linkedin" title="linkedin">T</span> <span class="dc_pictogram_raphael" alt="github" title="github">U</span> <span class="dc_pictogram_raphael" alt="credit card" title="credit card">V</span> <span class="dc_pictogram_raphael" alt="lock" title="lock">W</span> <span class="dc_pictogram_raphael" alt="conversation" title="conversation">[</span> <span class="dc_pictogram_raphael" alt="quotes" title="quotes">\</span> <span class="dc_pictogram_raphael" alt="community" title="community">]</span> <span class="dc_pictogram_raphael" alt="twitter" title="twitter">^</span> <span class="dc_pictogram_raphael" alt="gears" title="gears">_</span> <span class="dc_pictogram_raphael" alt="gears" title="gears alt">'</span> <span class="dc_pictogram_raphael" alt="tools" title="tools">a</span> <span class="dc_pictogram_raphael" alt="wizard" title="wizard">b</span> L5: <span class="dc_pictogram_raphael" alt="down point" title="down point">c</span> <span class="dc_pictogram_raphael" alt="firefox" title="firefox">d</span> <span class="dc_pictogram_raphael" alt="internet explorer" title="internet explorer">e</span> <span class="dc_pictogram_raphael" alt="opera" title="opera">f</span> <span class="dc_pictogram_raphael" alt="chrome" title="chrome">g</span> <span class="dc_pictogram_raphael" alt="safari" title="safari">h</span> <span class="dc_pictogram_raphael" alt="view" title="view">i</span> <span class="dc_pictogram_raphael" alt="view disabled" title="view disabled">j</span> <span class="dc_pictogram_raphael" alt="cloud" title="cloud">k</span> <span class="dc_pictogram_raphael" alt="cloud alt" title="cloud alt">l</span> <span class="dc_pictogram_raphael" alt="download from cloud" title="download from cloud">m</span> <span class="dc_pictogram_raphael" alt="upload to cloud" title="upload to cloud">n</span> <span class="dc_pictogram_raphael" alt="place" title="place">o</span> <span class="dc_pictogram_raphael" alt="no sound" title="no sound">p</span> <span class="dc_pictogram_raphael" alt="sound low" title="sound low">q</span> <span class="dc_pictogram_raphael" alt="sound mid" title="sound mid">r</span> <span class="dc_pictogram_raphael" alt="sound max" title="sound max">s</span> L6: <span class="dc_pictogram_raphael" alt="key" title="key">t</span> <span class="dc_pictogram_raphael" alt="ruler" title="ruler">u</span> <span class="dc_pictogram_raphael" alt="power" title="power">v</span> <span class="dc_pictogram_raphael" alt="unlock" title="unlock">w</span> <span class="dc_pictogram_raphael" alt="flag" title="flag">x</span> <span class="dc_pictogram_raphael" alt="tag" title="tag">y</span> <span class="dc_pictogram_raphael" alt="search" title="search">z</span> <span class="dc_pictogram_raphael" alt="zoom out" title="zoom out">À</span> <span class="dc_pictogram_raphael" alt="zoom in" title="zoom in">Á</span> <span class="dc_pictogram_raphael" alt="delete" title="delete">Â</span> <span class="dc_pictogram_raphael" alt="tick" title="tick">Ã</span> <span class="dc_pictogram_raphael" alt="gears" title="gears">Ä</span> <span class="dc_pictogram_raphael" alt="tools" title="tools">Å</span> <span class="dc_pictogram_raphael" alt="rss" title="rss">Æ</span> <span class="dc_pictogram_raphael" alt="bug" title="bug">Ç</span> <span class="dc_pictogram_raphael" alt="link" title="link">È</span> L7: <span class="dc_pictogram_raphael" alt="date" title="date">É</span> <span class="dc_pictogram_raphael" alt="picker" title="picker">Ê</span> <span class="dc_pictogram_raphael" alt="ban" title="ban">Ë</span> <span class="dc_pictogram_raphael" alt="list" title="list">Ì</span> <span class="dc_pictogram_raphael" alt="camera" title="camera">Í</span> <span class="dc_pictogram_raphael" alt="print" title="print">Î</span> <span class="dc_pictogram_raphael" alt="out" title="out">Ï</span> <span class="dc_pictogram_raphael" alt="in" title="in">Ð</span> <span class="dc_pictogram_raphael" alt="options" title="options">Ñ</span> <span class="dc_pictogram_raphael" alt="magnetic" title="magnetic">Ò</span> <span class="dc_pictogram_raphael" alt="non magnetic" title="non magnetic">Ó</span> <span class="dc_pictogram_raphael" alt="vertical" title="vertical">Ô</span> <span class="dc_pictogram_raphael" alt="horizontal" title="horizontal">Õ</span> <span class="dc_pictogram_raphael" alt="connection" title="connection">Ö</span> <span class="dc_pictogram_raphael" alt="no connection" title="no connection">×</span> <span class="dc_pictogram_raphael" alt="folder" title="folder">Ø</span> L8: <span class="dc_pictogram_raphael" alt="male" title="male">Ù</span> <span class="dc_pictogram_raphael" alt="female" title="female">Ú</span> <span class="dc_pictogram_raphael" alt="book" title="book">Û</span> <span class="dc_pictogram_raphael" alt="org chart" title="org chart">Ü</span>

Entypo Pictograms

L0: ë ì í î %
L1: ë ì í î " # $ % & ' ( ) * + , -
L2: . / 0 1 2 3 4 5 6 7 8 9 : ; < =
L3: > ? @ A B C D E F G H I J K L M
L4: N O P Q R S T U V W X Y Z [ \ ] ^ _
L5: ` a b c d e f g h i j k l m n o
L6: p q r s t u v w x y z { | } ~ ©
L7: ® Ä Å Ç É Ñ Ö Ü à á ä ‘ ç è é ê
L8: ï ñ ò ó ô ö ‐ ™

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136

L0: <span class="dc_pictogram_entypo" style="color:#666666;font-size:75px;" alt="left" title="left">ë</span> <span class="dc_pictogram_entypo" style="color:#3c5a97;font-size:75px;" alt="top" title="top">ì</span> <span class="dc_pictogram_entypo" style="color:#01aced;font-size:75px;" alt="down" title="down">í</span> <span class="dc_pictogram_entypo" style="color:#da5232;font-size:75px;" alt="right" title="right">î</span> <span class="dc_pictogram_entypo" style="color:#8abc2b;font-size:75px;" alt="email" title="email">%</span> L1: <span class="dc_pictogram_entypo" alt="left" title="left">ë</span> <span class="dc_pictogram_entypo" alt="top" title="top">ì</span> <span class="dc_pictogram_entypo" alt="down" title="down">í</span> <span class="dc_pictogram_entypo" alt="right" title="right">î</span> <span class="dc_pictogram_entypo" alt="smartphone" title="smartphone">"</span> <span class="dc_pictogram_entypo" alt="tag" title="tag">#</span> <span class="dc_pictogram_entypo" alt="location" title="location">$</span> <span class="dc_pictogram_entypo" alt="email" title="email">%</span> <span class="dc_pictogram_entypo" alt="pencil" title="pencil">&</span> <span class="dc_pictogram_entypo" alt="paperclip" title="paperclip">'</span> <span class="dc_pictogram_entypo" alt="go back" title="go back">(</span> <span class="dc_pictogram_entypo" alt="go back:first" title="go back:first">)</span> <span class="dc_pictogram_entypo" alt="go forward" title="go forward">*</span> <span class="dc_pictogram_entypo" alt="profile" title="profile">+</span> <span class="dc_pictogram_entypo" alt="profiles" title="profiles">,</span> <span class="dc_pictogram_entypo" alt="add profile" title="add profile">-</span> L2: <span class="dc_pictogram_entypo" alt="identity" title="identity">.</span> <span class="dc_pictogram_entypo" alt="open" title="open">/</span> <span class="dc_pictogram_entypo" alt="place" title="place">0</span> <span class="dc_pictogram_entypo" alt="brochure" title="brochure">1</span> <span class="dc_pictogram_entypo" alt="compass" title="compass">2</span> <span class="dc_pictogram_entypo" alt="direction" title="direction">3</span> <span class="dc_pictogram_entypo" alt="aim" title="aim">4</span> <span class="dc_pictogram_entypo" alt="share" title="share">5</span> <span class="dc_pictogram_entypo" alt="love" title="love">6</span> <span class="dc_pictogram_entypo" alt="star" title="star">7</span> <span class="dc_pictogram_entypo" alt="thumbs up" title="thumbs up">8</span> <span class="dc_pictogram_entypo" alt="conversation" title="conversation">9</span> <span class="dc_pictogram_entypo" alt="chat" title="chat">:</span> <span class="dc_pictogram_entypo" alt="quotes" title="quotes">;</span> <span class="dc_pictogram_entypo" alt="print" title="print"><</span> <span class="dc_pictogram_entypo" alt="bell" title="bell">=</span> L3: <span class="dc_pictogram_entypo" alt="anchor" title="anchor">></span> <span class="dc_pictogram_entypo" alt="flag" title="flag">?</span> <span class="dc_pictogram_entypo" alt="gears" title="gears">@</span> <span class="dc_pictogram_entypo" alt="flashlight" title="flashlight">A</span> <span class="dc_pictogram_entypo" alt="trophy" title="trophy">B</span> <span class="dc_pictogram_entypo" alt="price tag" title="price tag">C</span> <span class="dc_pictogram_entypo" alt="camera" title="camera">D</span> <span class="dc_pictogram_entypo" alt="moon" title="moon">E</span> <span class="dc_pictogram_entypo" alt="palette" title="palette">F</span> <span class="dc_pictogram_entypo" alt="leaf" title="leaf">G</span> <span class="dc_pictogram_entypo" alt="music" title="music">H</span> <span class="dc_pictogram_entypo" alt="bag" title="bag">I</span> <span class="dc_pictogram_entypo" alt="travel" title="travel">J</span> <span class="dc_pictogram_entypo" alt="float" title="float">K</span> <span class="dc_pictogram_entypo" alt="circles" title="circles">L</span> <span class="dc_pictogram_entypo" alt="view" title="view">M</span> L4: <span class="dc_pictogram_entypo" alt="time" title="time">N</span> <span class="dc_pictogram_entypo" alt="microphone" title="microphone">O</span> <span class="dc_pictogram_entypo" alt="date" title="date">P</span> <span class="dc_pictogram_entypo" alt="lightning" title="lightning">Q</span> <span class="dc_pictogram_entypo" alt="loading" title="loading">R</span> <span class="dc_pictogram_entypo" alt="rss" title="rss">S</span> <span class="dc_pictogram_entypo" alt="volume" title="volume">T</span> <span class="dc_pictogram_entypo" alt="lock" title="lock">U</span> <span class="dc_pictogram_entypo" alt="unlock" title="unlock">V</span> <span class="dc_pictogram_entypo" alt="tick" title="tick">W</span> <span class="dc_pictogram_entypo" alt="cross" title="cross">X</span> <span class="dc_pictogram_entypo" alt="minus" title="minus">Y</span> <span class="dc_pictogram_entypo" alt="add" title="add">Z</span> <span class="dc_pictogram_entypo" alt="delete" title="delete">[</span> <span class="dc_pictogram_entypo" alt="minus" title="minus">\</span> <span class="dc_pictogram_entypo" alt="add" title="add">]</span> <span class="dc_pictogram_entypo" alt="ban" title="ban">^</span> <span class="dc_pictogram_entypo" alt="information" title="information">_</span> L5: <span class="dc_pictogram_entypo" alt="information alt" title="information alt">`</span> <span class="dc_pictogram_entypo" alt="question" title="question">a</span> <span class="dc_pictogram_entypo" alt="question alt" title="question alt">b</span> <span class="dc_pictogram_entypo" alt="warning" title="warning">c</span> <span class="dc_pictogram_entypo" alt="reload" title="reload">d</span> <span class="dc_pictogram_entypo" alt="reload alt" title="reload alt">e</span> <span class="dc_pictogram_entypo" alt="shuffle" title="shuffle">f</span> <span class="dc_pictogram_entypo" alt="repeat" title="repeat">g</span> <span class="dc_pictogram_entypo" alt="retweet" title="retweet">h</span> <span class="dc_pictogram_entypo" alt="lists" title="lists">i</span> <span class="dc_pictogram_entypo" alt="add to list" title="add to list">j</span> <span class="dc_pictogram_entypo" alt="grid" title="grid">k</span> <span class="dc_pictogram_entypo" alt="text document" title="text document">l</span> <span class="dc_pictogram_entypo" alt="vertical document" title="vertical document">m</span> <span class="dc_pictogram_entypo" alt="multiple documents" title="multiple documents">n</span> <span class="dc_pictogram_entypo" alt="landscape document" title="landscape document">o</span> L6: <span class="dc_pictogram_entypo" alt="photos" title="photos">p</span> <span class="dc_pictogram_entypo" alt="film" title="film">q</span> <span class="dc_pictogram_entypo" alt="sound" title="sound">r</span> <span class="dc_pictogram_entypo" alt="folder" title="folder">s</span> <span class="dc_pictogram_entypo" alt="cabinet" title="cabinet">t</span> <span class="dc_pictogram_entypo" alt="bin" title="bin">u</span> <span class="dc_pictogram_entypo" alt="outgoing" title="outgoing">v</span> <span class="dc_pictogram_entypo" alt="incoming" title="incoming">w</span> <span class="dc_pictogram_entypo" alt="download" title="download">x</span> <span class="dc_pictogram_entypo" alt="cloud" title="cloud">y</span> <span class="dc_pictogram_entypo" alt="upload to cloud" title="upload to cloud">z</span> <span class="dc_pictogram_entypo" alt="play" title="play">{</span> <span class="dc_pictogram_entypo" alt="pause" title="pause">|</span> <span class="dc_pictogram_entypo" alt="record" title="record">}</span> <span class="dc_pictogram_entypo" alt="stop" title="stop">~</span> <span class="dc_pictogram_entypo" alt="creative commons" title="creative commons">©</span> L7: <span class="dc_pictogram_entypo" alt="table" title="table">®</span> <span class="dc_pictogram_entypo" alt="fast forward" title="fast forward">Ä</span> <span class="dc_pictogram_entypo" alt="rewind" title="rewind">Å</span> <span class="dc_pictogram_entypo" alt="first" title="first">Ç</span> <span class="dc_pictogram_entypo" alt="last" title="last">É</span> <span class="dc_pictogram_entypo" alt="expand" title="expand">Ñ</span> <span class="dc_pictogram_entypo" alt="shrink" title="shrink">Ö</span> <span class="dc_pictogram_entypo" alt="ramp" title="ramp">Ü</span> <span class="dc_pictogram_entypo" alt="mute" title="mute">à</span> <span class="dc_pictogram_entypo" alt="sound" title="sound">á</span> <span class="dc_pictogram_entypo" alt="down" title="down">ä</span> <span class="dc_pictogram_entypo" alt="quotation" title="quotation">‘</span> <span class="dc_pictogram_entypo" alt="left" title="left">ç</span> <span class="dc_pictogram_entypo" alt="up" title="up">è</span> <span class="dc_pictogram_entypo" alt="down" title="down">é</span> <span class="dc_pictogram_entypo" alt="right" title="right">ê</span> L8: <span class="dc_pictogram_entypo" alt="home" title="home">ï</span> <span class="dc_pictogram_entypo" alt="bookmark" title="bookmark">ñ</span> <span class="dc_pictogram_entypo" alt="open in new window" title="open in new window">ò</span> <span class="dc_pictogram_entypo" alt="read" title="read">ó</span> <span class="dc_pictogram_entypo" alt="find" title="find">ô</span> <span class="dc_pictogram_entypo" alt="3 dots" title="3 dots">ö</span> <span class="dc_pictogram_entypo" alt="profile add" title="profile add">‐</span> <span class="dc_pictogram_entypo" alt="eol" title="eol">™</span>

SymbolSigns Pictograms

L0: j J M F X L D U R Y
L1: A B C D E F G H I J K L M
L2: N O P Q R S T U W X Y a
L3: b c d e f g h i k l m
L4: n o p j q r t u w x y

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

L0: <span class="dc_pictogram_symbolsigns round" style="background-color:#666666;color:#fff;font-size:16px;" alt="plus" title="plus">j</span> <span class="dc_pictogram_symbolsigns round" style="background-color:#3c5a97;color:#fff;font-size:20px;" alt="phone" title="phone">J</span> <span class="dc_pictogram_symbolsigns round" style="background-color:#01aced;color:#fff;font-size:24px;" alt="male" title="male">M</span> <span class="dc_pictogram_symbolsigns bevel" style="background-color:#da5232;color:#fff;font-size:28px;" alt="female" title="female">F</span> <span class="dc_pictogram_symbolsigns metro" style="background-color:#8abc2b;color:#fff;font-size:36px;" alt="left down" title="left down">X</span> <span class="dc_pictogram_symbolsigns" style="color:#cf480c;font-size:64px;" alt="left" title="left">L</span> <span class="dc_pictogram_symbolsigns" style="color:#3bafeb;font-size:64px;" alt="down" title="down">D</span> <span class="dc_pictogram_symbolsigns" style="color:#d71212;font-size:64px;" alt="up" title="up">U</span> <span class="dc_pictogram_symbolsigns" style="color:#48a547;font-size:64px;" alt="right" title="right">R</span> <span class="dc_pictogram_symbolsigns" style="color:#1154a3;font-size:64px;" alt="right down" title="right down">Y</span> L1: <span class="dc_pictogram_symbolsigns" alt="no dogs" title="no dogs">A</span> <span class="dc_pictogram_symbolsigns" alt="baby feeding" title="baby feeding">B</span> <span class="dc_pictogram_symbolsigns" alt="currency" title="currency">C</span> <span class="dc_pictogram_symbolsigns" alt="down" title="down">D</span> <span class="dc_pictogram_symbolsigns" alt="exit" title="exit">E</span> <span class="dc_pictogram_symbolsigns" alt="female" title="female">F</span> <span class="dc_pictogram_symbolsigns" alt="coat hanger" title="coat hanger">G</span> <span class="dc_pictogram_symbolsigns" alt="ehbo" title="ehbo">H</span> <span class="dc_pictogram_symbolsigns" alt="info" title="info">I</span> <span class="dc_pictogram_symbolsigns" alt="phone" title="phone">J</span> <span class="dc_pictogram_symbolsigns" alt="parking" title="parking">K</span> <span class="dc_pictogram_symbolsigns" alt="left" title="left">L</span> <span class="dc_pictogram_symbolsigns" alt="male" title="male">M</span> L2: <span class="dc_pictogram_symbolsigns" alt="no smoking" title="no smoking">N</span> <span class="dc_pictogram_symbolsigns" alt="no parking" title="no parking">O</span> <span class="dc_pictogram_symbolsigns" alt="do not enter" title="do not enter">P</span> <span class="dc_pictogram_symbolsigns" alt="question" title="question">Q</span> <span class="dc_pictogram_symbolsigns" alt="right" title="right">R</span> <span class="dc_pictogram_symbolsigns" alt="smoking" title="smoking">S</span> <span class="dc_pictogram_symbolsigns" alt="person" title="person">T</span> <span class="dc_pictogram_symbolsigns" alt="up" title="up">U</span> <span class="dc_pictogram_symbolsigns" alt="notice" title="notice">W</span> <span class="dc_pictogram_symbolsigns" alt="left down" title="left down">X</span> <span class="dc_pictogram_symbolsigns" alt="right down" title="right down">Y</span> <span class="dc_pictogram_symbolsigns" alt="camera" title="camera">a</span> L3: <span class="dc_pictogram_symbolsigns" alt="food" title="food">b</span> <span class="dc_pictogram_symbolsigns" alt="beverage" title="beverage">c</span> <span class="dc_pictogram_symbolsigns" alt="wheelchair" title="wheelchair">d</span> <span class="dc_pictogram_symbolsigns" alt="elevator" title="elevator">e</span> <span class="dc_pictogram_symbolsigns" alt="hose" title="hose">f</span> <span class="dc_pictogram_symbolsigns" alt="email" title="email">g</span> <span class="dc_pictogram_symbolsigns" alt="luggage lock" title="luggage lock">h</span> <span class="dc_pictogram_symbolsigns" alt="info" title="info">i</span> <span class="dc_pictogram_symbolsigns" alt="up stairs" title="up stairs">k</span> <span class="dc_pictogram_symbolsigns" alt="up stairs" title="up stairs">l</span> <span class="dc_pictogram_symbolsigns" alt="down stairs" title="down stairs">m</span> L4: <span class="dc_pictogram_symbolsigns" alt="stairs up/down" title="stairs up/down">n</span> <span class="dc_pictogram_symbolsigns" alt="recycle" title="recycle">o</span> <span class="dc_pictogram_symbolsigns" alt="staff only" title="staff only">p</span> <span class="dc_pictogram_symbolsigns" alt="medical" title="medical">j</span> <span class="dc_pictogram_symbolsigns" alt="information" title="information">q</span> <span class="dc_pictogram_symbolsigns" alt="food" title="food">r</span> <span class="dc_pictogram_symbolsigns" alt="showers" title="showers>s</span> <span class="dc_pictogram_symbolsigns" alt="travel" title="travel">t</span> <span class="dc_pictogram_symbolsigns" alt="put rubbish in bin" title="put rubbish in bin">u</span> <span class="dc_pictogram_symbolsigns" alt="wifi access" title="wifi access">w</span> <span class="dc_pictogram_symbolsigns" alt="up left" title="up left">x</span> <span class="dc_pictogram_symbolsigns" alt="up right" title="up right">y</span>

Pictogram Social

- Pictogram icons use the @font-face tag to render icons
- Pictogram icons can be set to any size, color or style via code.
- Picogram icons work with all modern web browsers.
- Picogram icons are 95% smaller in file size than image based icons.

Examples: S F t + f

Note: Pictograms may not load in Firefox during local browsing mode due to security zone settings.

Pictogram Social

S s F t w + l ! 8 f - m $ 5 = @ r o E 9 y v n % q L p ? i B U z K b T M J h N 3 R Z u ) 6 4 c d D G P A X V I x O W Q 0 1 a e 7 2 j g H Y ( , * C k &

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

<a class="dc_socialpictogram" alt="Email" title="Email" href="#">S</a> <a class="dc_socialpictogram" alt="Skype" title="Skype" href="#">s</a> <a class="dc_socialpictogram" alt="Facebook" title="Facebook" href="#">F</a> <a class="dc_socialpictogram" alt="Twitter" title="Twitter" href="#">t</a> <a class="dc_socialpictogram" alt="Blog" title="Blog" href="#">w</a> <a class="dc_socialpictogram" alt="Google +1" title="Google +1" href="#">+</a> <a class="dc_socialpictogram" alt="LinkedIn" title="LinkedIn" href="#">l</a> <a class="dc_socialpictogram" alt="Place" title="Place" href="#">!</a> <a class="dc_socialpictogram" alt="pInterest" title="pInterest" href="#">8</a> <a class="dc_socialpictogram" alt="Chat Online" title="Chat Online" href="#">f</a> <a class="dc_socialpictogram" alt="Phone" title="Phone" href="#">-</a> <a class="dc_socialpictogram" alt="Fax" title="Fax" href="#">m</a> <a class="dc_socialpictogram" alt="Map" title="Map" href="#">$</a> <a class="dc_socialpictogram" alt="Facebook" title="Facebook" href="#">5</a> <a class="dc_socialpictogram" alt="LinkedIn" title="LinkedIn" href="#">=</a> <a class="dc_socialpictogram" alt="Link" title="Link" href="#">@</a> <a class="dc_socialpictogram" alt="RSS" title="RSS" href="#">r</a> <a class="dc_socialpictogram" alt="Feedburner" title="Feedburner" href="#">o</a> <a class="dc_socialpictogram" alt="Podcast" title="Podcast" href="#">E</a> <a class="dc_socialpictogram" alt="Profile" title="Profile" href="#">9</a> <a class="dc_socialpictogram" alt="YouTube" title="YouTube" href="#">y</a> <a class="dc_socialpictogram" alt="Vimeo" title="Vimeo" href="#">v</a> <a class="dc_socialpictogram" alt="flickr" title="flickr" href="#">n</a> <a class="dc_socialpictogram" alt="500px" title="500px" href="#">%</a> <a class="dc_socialpictogram" alt="Grooveshark" title="Grooveshark" href="#">q</a> <a class="dc_socialpictogram" alt="last.fm" title="last.fm" href="#">L</a> <a class="dc_socialpictogram" alt="Picasa" title="Picasa" href="#">p</a> <a class="dc_socialpictogram" alt="Play" title="Play" href="#">?</a> <a class="dc_socialpictogram" alt="Music" title="Music" href="#">i</a> <a class="dc_socialpictogram" alt="Sound" title="Sound" href="#">B</a> <a class="dc_socialpictogram" alt="Viddler" title="Viddler" href="#">U</a> <a class="dc_socialpictogram" alt="+" title="+" href="#">z</a> <a class="dc_socialpictogram" alt="MySpace" title="MySpace" href="#">K</a> <a class="dc_socialpictogram" alt="Blogger" title="Blogger" href="#">b</a> <a class="dc_socialpictogram" alt="Tumblr" title="Tumblr" href="#">T</a> <a class="dc_socialpictogram" alt="Meetup" title="Meetup" href="#">M</a> <a class="dc_socialpictogram" alt="Love" title="Love" href="#">J</a> <a class="dc_socialpictogram" alt="Love" title="Love" href="#">h</a> <a class="dc_socialpictogram" alt="Newsvine" title="Newsvine" href="#">N</a> <a class="dc_socialpictogram" alt="Technorati" title="Technorati" href="#">3</a> <a class="dc_socialpictogram" alt="Reddit" title="Reddit" href="#">R</a> <a class="dc_socialpictogram" alt="Digg" title="Digg" href="#">Z</a> <a class="dc_socialpictogram" alt="Yelp" title="Yelp" href="#">u</a> <a class="dc_socialpictogram" alt="Foursquare" title="Foursquare" href="#">)</a> <a class="dc_socialpictogram" alt="StumbleUpon" title="StumbleUpon" href="#">6</a> <a class="dc_socialpictogram" alt="Formspring" title="Formspring" href="#">4</a> <a class="dc_socialpictogram" alt="Delicious" title="Delicious" href="#">c</a> <a class="dc_socialpictogram" alt="Dribbble" title="Dribbble" href="#">d</a> <a class="dc_socialpictogram" alt="deviantART" title="deviantART" href="#">D</a> <a class="dc_socialpictogram" alt="GitHub" title="GitHub" href="#">G</a> <a class="dc_socialpictogram" alt="PayPal" title="PayPal" href="#">P</a> <a class="dc_socialpictogram" alt="AIM Messenger" title="AIM Messenger" href="#">A</a> <a class="dc_socialpictogram" alt="MSN Messenger" title="MSN Messenger" href="#">X</a> <a class="dc_socialpictogram" alt="Y! Messenger" title="Y! Messenger" href="#">V</a> <a class="dc_socialpictogram" alt="ICQ" title="ICQ" href="#">I</a> <a class="dc_socialpictogram" alt="W3" title="W3" href="#">x</a> <a class="dc_socialpictogram" alt="OpenID" title="OpenID" href="#">O</a> <a class="dc_socialpictogram" alt="Wikipedia" title="Wikipedia" href="#">W</a> <a class="dc_socialpictogram" alt="Quora" title="Quora" href="#">Q</a> <a class="dc_socialpictogram" alt="Document" title="Document" href="#">0</a> <a class="dc_socialpictogram" alt="Evernote" title="Evernote" href="#">1</a> <a class="dc_socialpictogram" alt="Amazon" title="Amazon" href="#">a</a> <a class="dc_socialpictogram" alt="eBay" title="eBay" href="#">e</a> <a class="dc_socialpictogram" alt="Microsoft" title="Microsoft" href="#">7</a> <a class="dc_socialpictogram" alt="Apple" title="Apple" href="#">2</a> <a class="dc_socialpictogram" alt="Android" title="Android" href="#">j</a> <a class="dc_socialpictogram" alt="Google" title="Google" href="#">g</a> <a class="dc_socialpictogram" alt="Bing" title="Bing" href="#">H</a> <a class="dc_socialpictogram" alt="Yahoo!" title="Yahoo!" href="#">Y</a> <a class="dc_socialpictogram" alt="Baidu" title="Baidu" href="#">(</a> <a class="dc_socialpictogram" alt="Amazon AWS" title="Amazon AWS" href="#">,</a> <a class="dc_socialpictogram" alt="Dropbox" title="Dropbox" href="#">*</a> <a class="dc_socialpictogram" alt="Cloud Hosted" title="Cloud Hosted" href="#">C</a> <a class="dc_socialpictogram" alt="Retweet" title="Retweet" href="#">k</a> <a class="dc_socialpictogram" alt="Creative Commons" title="Creative Commons" href="#">&</a>

Pictogram Social (Round)

S s F t w + l ! 8 f - y v n r @ 9 A X V I $ 5 =

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<a class="dc_socialpictogram round" alt="Email" title="Email" href="#">S</a> <a class="dc_socialpictogram round" alt="Skype" title="Skype" href="#">s</a> <a class="dc_socialpictogram round" alt="Facebook" title="Facebook" href="#">F</a> <a class="dc_socialpictogram round" alt="Twitter" title="Twitter" href="#">t</a> <a class="dc_socialpictogram round" alt="Blog" title="Blog" href="#">w</a> <a class="dc_socialpictogram round" alt="Google +1" title="Google +1" href="#">+</a> <a class="dc_socialpictogram round" alt="LinkedIn" title="LinkedIn" href="#">l</a> <a class="dc_socialpictogram round" alt="Place" title="Place" href="#">!</a> <a class="dc_socialpictogram round" alt="pInterest" title="pInterest" href="#">8</a> <a class="dc_socialpictogram round" alt="Chat Online" title="Chat Online" href="#">f</a> <a class="dc_socialpictogram round" alt="Phone" title="Phone" href="#">-</a> <a class="dc_socialpictogram round" alt="YouTube" title="YouTube" href="#">y</a> <a class="dc_socialpictogram round" alt="Vimeo" title="Vimeo" href="#">v</a> <a class="dc_socialpictogram round" alt="flickr" title="flickr" href="#">n</a> <a class="dc_socialpictogram round" alt="RSS" title="RSS" href="#">r</a> <a class="dc_socialpictogram round" alt="Link" title="Link" href="#">@</a> <a class="dc_socialpictogram round" alt="Profile" title="Profile" href="#">9</a> <a class="dc_socialpictogram round" alt="AIM Messenger" title="AIM Messenger" href="#">A</a> <a class="dc_socialpictogram round" alt="MSN Messenger" title="MSN Messenger" href="#">X</a> <a class="dc_socialpictogram round" alt="Y! Messenger" title="Y! Messenger" href="#">V</a> <a class="dc_socialpictogram round" alt="ICQ" title="ICQ" href="#">I</a> <a class="dc_socialpictogram round" alt="Map" title="Map" href="#">$</a> <a class="dc_socialpictogram round" alt="Facebook" title="Facebook" href="#">5</a> <a class="dc_socialpictogram round" alt="LinkedIn" title="LinkedIn" href="#">=</a>

Pictogram Social (Metro)

S s F t w + l ! 8 f - y v n r @ 9 A X V I $ 5 =

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<a class="dc_socialpictogram metro" alt="Email" title="Email" href="#">S</a> <a class="dc_socialpictogram metro" alt="Skype" title="Skype" href="#">s</a> <a class="dc_socialpictogram metro" alt="Facebook" title="Facebook" href="#">F</a> <a class="dc_socialpictogram metro" alt="Twitter" title="Twitter" href="#">t</a> <a class="dc_socialpictogram metro" alt="Blog" title="Blog" href="#">w</a> <a class="dc_socialpictogram metro" alt="Google +1" title="Google +1" href="#">+</a> <a class="dc_socialpictogram metro" alt="LinkedIn" title="LinkedIn" href="#">l</a> <a class="dc_socialpictogram metro" alt="Place" title="Place" href="#">!</a> <a class="dc_socialpictogram metro" alt="pInterest" title="pInterest" href="#">8</a> <a class="dc_socialpictogram metro" alt="Chat Online" title="Chat Online" href="#">f</a> <a class="dc_socialpictogram metro" alt="Phone" title="Phone" href="#">-</a> <a class="dc_socialpictogram metro" alt="YouTube" title="YouTube" href="#">y</a> <a class="dc_socialpictogram metro" alt="Vimeo" title="Vimeo" href="#">v</a> <a class="dc_socialpictogram metro" alt="flickr" title="flickr" href="#">n</a> <a class="dc_socialpictogram metro" alt="RSS" title="RSS" href="#">r</a> <a class="dc_socialpictogram metro" alt="Link" title="Link" href="#">@</a> <a class="dc_socialpictogram metro" alt="Profile" title="Profile" href="#">9</a> <a class="dc_socialpictogram metro" alt="AIM Messenger" title="AIM Messenger" href="#">A</a> <a class="dc_socialpictogram metro" alt="MSN Messenger" title="MSN Messenger" href="#">X</a> <a class="dc_socialpictogram metro" alt="Y! Messenger" title="Y! Messenger" href="#">V</a> <a class="dc_socialpictogram metro" alt="ICQ" title="ICQ" href="#">I</a> <a class="dc_socialpictogram metro" alt="Map" title="Map" href="#">$</a> <a class="dc_socialpictogram metro" alt="Facebook" title="Facebook" href="#">5</a> <a class="dc_socialpictogram metro" alt="LinkedIn" title="LinkedIn" href="#">=</a>

Pictogram Social (Custom: Multi Colors + Round)

S s F t w + l ! 8 f - y v n r @ 9 A X V I $ 5 =

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<a class="dc_socialpictogram round" style="background-color: #666666; color:#fff;font-size:24px;" alt="Email" title="Email" href="#">S</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="Skype" title="Skype" href="#">s</a> <a class="dc_socialpictogram round" style="background-color: #3c5a97; color:#fff;font-size:24px;" alt="Facebook" title="Facebook" href="#">F</a> <a class="dc_socialpictogram round" style="background-color: #01aced; color:#fff;font-size:24px;" alt="Twitter" title="Twitter" href="#">t</a> <a class="dc_socialpictogram round" style="background-color: #454443; color:#fff;font-size:24px;" alt="Blog" title="Blog" href="#">w</a> <a class="dc_socialpictogram round" style="background-color: #da5232; color:#fff;font-size:24px;" alt="Google +1" title="Google +1" href="#">+</a> <a class="dc_socialpictogram round" style="background-color: #006599; color:#fff;font-size:24px;" alt="LinkedIn" title="LinkedIn" href="#">l</a> <a class="dc_socialpictogram round" style="background-color: #be859a; color:#fff;font-size:24px;" alt="Place" title="Place" href="#">!</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="pInterest" title="pInterest" href="#">8</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="Chat Online" title="Chat Online" href="#">f</a> <a class="dc_socialpictogram round" style="background-color: #333333; color:#fff;font-size:24px;" alt="Phone" title="Phone" href="#">-</a> <a class="dc_socialpictogram round" style="background-color: #fd3430; color:#fff;font-size:24px;" alt="YouTube" title="YouTube" href="#">y</a> <a class="dc_socialpictogram round" style="background-color: #1cb7ea; color:#fff;font-size:24px;" alt="Vimeo" title="Vimeo" href="#">v</a> <a class="dc_socialpictogram round" style="background-color: #ff0086; color:#fff;font-size:24px;" alt="flickr" title="flickr" href="#">n</a> <a class="dc_socialpictogram round" style="background-color: #ff6502; color:#fff;font-size:24px;" alt="RSS" title="RSS" href="#">r</a> <a class="dc_socialpictogram round" style="background-color: #999999; color:#fff;font-size:24px;" alt="Link" title="Link" href="#">@</a> <a class="dc_socialpictogram round" style="background-color: #333333; color:#fff;font-size:24px;" alt="Profile" title="Profile" href="#">9</a> <a class="dc_socialpictogram round" style="background-color: #e9b800; color:#fff;font-size:24px;" alt="AIM Messenger" title="AIM Messenger" href="#">A</a> <a class="dc_socialpictogram round" style="background-color: #378bb0; color:#fff;font-size:24px;" alt="MSN Messenger" title="MSN Messenger" href="#">X</a> <a class="dc_socialpictogram round" style="background-color: #fdba04; color:#fff;font-size:24px;" alt="Y! Messenger" title="Y! Messenger" href="#">V</a> <a class="dc_socialpictogram round" style="background-color: #15a916; color:#fff;font-size:24px;" alt="ICQ" title="ICQ" href="#">I</a> <a class="dc_socialpictogram round" style="background-color: #b92a2a; color:#fff;font-size:24px;" alt="Map" title="Map" href="#">$</a> <a class="dc_socialpictogram round" style="background-color: #3c5a97; color:#fff;font-size:24px;" alt="Facebook" title="Facebook" href="#">5</a> <a class="dc_socialpictogram round" style="background-color: #006599; color:#fff;font-size:24px;" alt="LinkedIn" title="LinkedIn" href="#">=</a>

Pictogram Social (Custom: Multi Colors + Metro)

S s F t w + l ! 8 f - y v n r @ 9 A X V I $ 5 =

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<a class="dc_socialpictogram metro" style="background-color: #666666; color:#fff;font-size:24px;" alt="Email" title="Email" href="#">S</a> <a class="dc_socialpictogram metro" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="Skype" title="Skype" href="#">s</a> <a class="dc_socialpictogram metro" style="background-color: #3c5a97; color:#fff;font-size:24px;" alt="Facebook" title="Facebook" href="#">F</a> <a class="dc_socialpictogram metro" style="background-color: #01aced; color:#fff;font-size:24px;" alt="Twitter" title="Twitter" href="#">t</a> <a class="dc_socialpictogram metro" style="background-color: #454443; color:#fff;font-size:24px;" alt="Blog" title="Blog" href="#">w</a> <a class="dc_socialpictogram metro" style="background-color: #da5232; color:#fff;font-size:24px;" alt="Google +1" title="Google +1" href="#">+</a> <a class="dc_socialpictogram metro" style="background-color: #006599; color:#fff;font-size:24px;" alt="LinkedIn" title="LinkedIn" href="#">l</a> <a class="dc_socialpictogram metro" style="background-color: #be859a; color:#fff;font-size:24px;" alt="Place" title="Place" href="#">!</a> <a class="dc_socialpictogram metro" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="pInterest" title="pInterest" href="#">8</a> <a class="dc_socialpictogram metro" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="Chat Online" title="Chat Online" href="#">f</a> <a class="dc_socialpictogram metro" style="background-color: #333333; color:#fff;font-size:24px;" alt="Phone" title="Phone" href="#">-</a> <a class="dc_socialpictogram metro" style="background-color: #fd3430; color:#fff;font-size:24px;" alt="YouTube" title="YouTube" href="#">y</a> <a class="dc_socialpictogram metro" style="background-color: #1cb7ea; color:#fff;font-size:24px;" alt="Vimeo" title="Vimeo" href="#">v</a> <a class="dc_socialpictogram metro" style="background-color: #ff0086; color:#fff;font-size:24px;" alt="flickr" title="flickr" href="#">n</a> <a class="dc_socialpictogram metro" style="background-color: #ff6502; color:#fff;font-size:24px;" alt="RSS" title="RSS" href="#">r</a> <a class="dc_socialpictogram metro" style="background-color: #999999; color:#fff;font-size:24px;" alt="Link" title="Link" href="#">@</a> <a class="dc_socialpictogram metro" style="background-color: #333333; color:#fff;font-size:24px;" alt="Profile" title="Profile" href="#">9</a> <a class="dc_socialpictogram metro" style="background-color: #e9b800; color:#fff;font-size:24px;" alt="AIM Messenger" title="AIM Messenger" href="#">A</a> <a class="dc_socialpictogram metro" style="background-color: #378bb0; color:#fff;font-size:24px;" alt="MSN Messenger" title="MSN Messenger" href="#">X</a> <a class="dc_socialpictogram metro" style="background-color: #fdba04; color:#fff;font-size:24px;" alt="Y! Messenger" title="Y! Messenger" href="#">V</a> <a class="dc_socialpictogram metro" style="background-color: #15a916; color:#fff;font-size:24px;" alt="ICQ" title="ICQ" href="#">I</a> <a class="dc_socialpictogram metro" style="background-color: #b92a2a; color:#fff;font-size:24px;" alt="Map" title="Map" href="#">$</a> <a class="dc_socialpictogram metro" style="background-color: #3c5a97; color:#fff;font-size:24px;" alt="Facebook" title="Facebook" href="#">5</a> <a class="dc_socialpictogram metro" style="background-color: #006599; color:#fff;font-size:24px;" alt="LinkedIn" title="LinkedIn" href="#">=</a>

Pictogram Social (Custom: Multi Colors + Metro + Mini)

S s F t w + l ! 8 f - y v n r @ 9 A X V I $ 5 =

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<a class="dc_socialpictogram metro" style="background-color: #666666; color:#fff;font-size:18px;" alt="Email" title="Email" href="#">S</a> <a class="dc_socialpictogram metro" style="background-color: #00aff0; color:#fff;font-size:18px;" alt="Skype" title="Skype" href="#">s</a> <a class="dc_socialpictogram metro" style="background-color: #3c5a97; color:#fff;font-size:18px;" alt="Facebook" title="Facebook" href="#">F</a> <a class="dc_socialpictogram metro" style="background-color: #01aced; color:#fff;font-size:18px;" alt="Twitter" title="Twitter" href="#">t</a> <a class="dc_socialpictogram metro" style="background-color: #454443; color:#fff;font-size:18px;" alt="Blog" title="Blog" href="#">w</a> <a class="dc_socialpictogram metro" style="background-color: #da5232; color:#fff;font-size:18px;" alt="Google +1" title="Google +1" href="#">+</a> <a class="dc_socialpictogram metro" style="background-color: #006599; color:#fff;font-size:18px;" alt="LinkedIn" title="LinkedIn" href="#">l</a> <a class="dc_socialpictogram metro" style="background-color: #be859a; color:#fff;font-size:18px;" alt="Place" title="Place" href="#">!</a> <a class="dc_socialpictogram metro" style="background-color: #d5342f; color:#fff;font-size:18px;" alt="pInterest" title="pInterest" href="#">8</a> <a class="dc_socialpictogram metro" style="background-color: #8abc2b; color:#fff;font-size:18px;" alt="Chat Online" title="Chat Online" href="#">f</a> <a class="dc_socialpictogram metro" style="background-color: #333333; color:#fff;font-size:18px;" alt="Phone" title="Phone" href="#">-</a> <a class="dc_socialpictogram metro" style="background-color: #fd3430; color:#fff;font-size:18px;" alt="YouTube" title="YouTube" href="#">y</a> <a class="dc_socialpictogram metro" style="background-color: #1cb7ea; color:#fff;font-size:18px;" alt="Vimeo" title="Vimeo" href="#">v</a> <a class="dc_socialpictogram metro" style="background-color: #ff0086; color:#fff;font-size:18px;" alt="flickr" title="flickr" href="#">n</a> <a class="dc_socialpictogram metro" style="background-color: #ff6502; color:#fff;font-size:18px;" alt="RSS" title="RSS" href="#">r</a> <a class="dc_socialpictogram metro" style="background-color: #999999; color:#fff;font-size:18px;" alt="Link" title="Link" href="#">@</a> <a class="dc_socialpictogram metro" style="background-color: #333333; color:#fff;font-size:18px;" alt="Profile" title="Profile" href="#">9</a> <a class="dc_socialpictogram metro" style="background-color: #e9b800; color:#fff;font-size:18px;" alt="AIM Messenger" title="AIM Messenger" href="#">A</a> <a class="dc_socialpictogram metro" style="background-color: #378bb0; color:#fff;font-size:18px;" alt="MSN Messenger" title="MSN Messenger" href="#">X</a> <a class="dc_socialpictogram metro" style="background-color: #fdba04; color:#fff;font-size:18px;" alt="Y! Messenger" title="Y! Messenger" href="#">V</a> <a class="dc_socialpictogram metro" style="background-color: #15a916; color:#fff;font-size:18px;" alt="ICQ" title="ICQ" href="#">I</a> <a class="dc_socialpictogram metro" style="background-color: #b92a2a; color:#fff;font-size:18px;" alt="Map" title="Map" href="#">$</a> <a class="dc_socialpictogram metro" style="background-color: #3c5a97; color:#fff;font-size:18px;" alt="Facebook" title="Facebook" href="#">5</a> <a class="dc_socialpictogram metro" style="background-color: #006599; color:#fff;font-size:18px;" alt="LinkedIn" title="LinkedIn" href="#">=</a>

Pictogram Social (Custom: Dark Gray + Round)

S s F t w + l ! 8 f - y v n r @ 9 A X V I $ 5 =

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="Email" title="Email" href="#">S</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="Skype" title="Skype" href="#">s</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="Facebook" title="Facebook" href="#">F</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="Twitter" title="Twitter" href="#">t</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="Blog" title="Blog" href="#">w</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="Google +1" title="Google +1" href="#">+</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="LinkedIn" title="LinkedIn" href="#">l</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="Place" title="Place" href="#">!</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="pInterest" title="pInterest" href="#">8</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="Chat Online" title="Chat Online" href="#">f</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="Phone" title="Phone" href="#">-</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="YouTube" title="YouTube" href="#">y</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="Vimeo" title="Vimeo" href="#">v</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="flickr" title="flickr" href="#">n</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="RSS" title="RSS" href="#">r</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="Link" title="Link" href="#">@</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="Profile" title="Profile" href="#">9</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="AIM Messenger" title="AIM Messenger" href="#">A</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="MSN Messenger" title="MSN Messenger" href="#">X</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="Y! Messenger" title="Y! Messenger" href="#">V</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="ICQ" title="ICQ" href="#">I</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="Map" title="Map" href="#">$</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="Facebook" title="Facebook" href="#">5</a> <a class="dc_socialpictogram round" style="background-color: #666; color:#fff;font-size:24px;" alt="LinkedIn" title="LinkedIn" href="#">=</a>

Pictogram Social (Custom: Dark Gray + Metro)

S s F t w + l ! 8 f - y v n r @ 9 A X V I $ 5 =

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="Email" title="Email" href="#">S</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="Skype" title="Skype" href="#">s</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="Facebook" title="Facebook" href="#">F</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="Twitter" title="Twitter" href="#">t</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="Blog" title="Blog" href="#">w</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="Google +1" title="Google +1" href="#">+</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="LinkedIn" title="LinkedIn" href="#">l</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="Place" title="Place" href="#">!</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="pInterest" title="pInterest" href="#">8</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="Chat Online" title="Chat Online" href="#">f</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="Phone" title="Phone" href="#">-</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="YouTube" title="YouTube" href="#">y</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="Vimeo" title="Vimeo" href="#">v</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="flickr" title="flickr" href="#">n</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="RSS" title="RSS" href="#">r</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="Link" title="Link" href="#">@</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="Profile" title="Profile" href="#">9</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="AIM Messenger" title="AIM Messenger" href="#">A</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="MSN Messenger" title="MSN Messenger" href="#">X</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="Y! Messenger" title="Y! Messenger" href="#">V</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="ICQ" title="ICQ" href="#">I</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="Map" title="Map" href="#">$</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="Facebook" title="Facebook" href="#">5</a> <a class="dc_socialpictogram metro" style="background-color: #666; color:#fff;font-size:24px;" alt="LinkedIn" title="LinkedIn" href="#">=</a>

Pictogram Social (Custom: Multi Colors + Round)

S s F t w + l ! 8 f - y v n r @ 9 A X V I $ 5 =

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<a class="dc_socialpictogram round" style="background-color: #666666; color:#fff;font-size:48px;" alt="Email" title="Email" href="#">S</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:48px;" alt="Skype" title="Skype" href="#">s</a> <a class="dc_socialpictogram round" style="background-color: #3c5a97; color:#fff;font-size:48px;" alt="Facebook" title="Facebook" href="#">F</a> <a class="dc_socialpictogram round" style="background-color: #01aced; color:#fff;font-size:48px;" alt="Twitter" title="Twitter" href="#">t</a> <a class="dc_socialpictogram round" style="background-color: #454443; color:#fff;font-size:48px;" alt="Blog" title="Blog" href="#">w</a> <a class="dc_socialpictogram round" style="background-color: #da5232; color:#fff;font-size:48px;" alt="Google +1" title="Google +1" href="#">+</a> <a class="dc_socialpictogram round" style="background-color: #006599; color:#fff;font-size:48px;" alt="LinkedIn" title="LinkedIn" href="#">l</a> <a class="dc_socialpictogram round" style="background-color: #be859a; color:#fff;font-size:48px;" alt="Place" title="Place" href="#">!</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:48px;" alt="pInterest" title="pInterest" href="#">8</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:48px;" alt="Chat Online" title="Chat Online" href="#">f</a> <a class="dc_socialpictogram round" style="background-color: #333333; color:#fff;font-size:48px;" alt="Phone" title="Phone" href="#">-</a> <a class="dc_socialpictogram round" style="background-color: #fd3430; color:#fff;font-size:48px;" alt="YouTube" title="YouTube" href="#">y</a> <a class="dc_socialpictogram round" style="background-color: #1cb7ea; color:#fff;font-size:48px;" alt="Vimeo" title="Vimeo" href="#">v</a> <a class="dc_socialpictogram round" style="background-color: #ff0086; color:#fff;font-size:48px;" alt="flickr" title="flickr" href="#">n</a> <a class="dc_socialpictogram round" style="background-color: #ff6502; color:#fff;font-size:48px;" alt="RSS" title="RSS" href="#">r</a> <a class="dc_socialpictogram round" style="background-color: #999999; color:#fff;font-size:48px;" alt="Link" title="Link" href="#">@</a> <a class="dc_socialpictogram round" style="background-color: #333333; color:#fff;font-size:48px;" alt="Profile" title="Profile" href="#">9</a> <a class="dc_socialpictogram round" style="background-color: #e9b800; color:#fff;font-size:48px;" alt="AIM Messenger" title="AIM Messenger" href="#">A</a> <a class="dc_socialpictogram round" style="background-color: #378bb0; color:#fff;font-size:48px;" alt="MSN Messenger" title="MSN Messenger" href="#">X</a> <a class="dc_socialpictogram round" style="background-color: #fdba04; color:#fff;font-size:48px;" alt="Y! Messenger" title="Y! Messenger" href="#">V</a> <a class="dc_socialpictogram round" style="background-color: #15a916; color:#fff;font-size:48px;" alt="ICQ" title="ICQ" href="#">I</a> <a class="dc_socialpictogram round" style="background-color: #b92a2a; color:#fff;font-size:48px;" alt="Map" title="Map" href="#">$</a> <a class="dc_socialpictogram round" style="background-color: #3c5a97; color:#fff;font-size:48px;" alt="Facebook" title="Facebook" href="#">5</a> <a class="dc_socialpictogram round" style="background-color: #006599; color:#fff;font-size:48px;" alt="LinkedIn" title="LinkedIn" href="#">=</a>

Pictogram Social (Custom: White + Round)

S s F t w + l ! 8 f - y v n r @

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<a class="dc_socialpictogram round" style="background-color: #f2f2f2; color:#333;font-size:24px;" alt="Email" title="Email" href="#">S</a> <a class="dc_socialpictogram round" style="background-color: #f2f2f2; color:#333;font-size:24px;" alt="Skype" title="Skype" href="#">s</a> <a class="dc_socialpictogram round" style="background-color: #f2f2f2; color:#333;font-size:24px;" alt="Facebook" title="Facebook" href="#">F</a> <a class="dc_socialpictogram round" style="background-color: #f2f2f2; color:#333;font-size:24px;" alt="Twitter" title="Twitter" href="#">t</a> <a class="dc_socialpictogram round" style="background-color: #f2f2f2; color:#333;font-size:24px;" alt="Blog" title="Blog" href="#">w</a> <a class="dc_socialpictogram round" style="background-color: #f2f2f2; color:#333;font-size:24px;" alt="Google +1" title="Google +1" href="#">+</a> <a class="dc_socialpictogram round" style="background-color: #f2f2f2; color:#333;font-size:24px;" alt="LinkedIn" title="LinkedIn" href="#">l</a> <a class="dc_socialpictogram round" style="background-color: #f2f2f2; color:#333;font-size:24px;" alt="Place" title="Place" href="#">!</a> <a class="dc_socialpictogram round" style="background-color: #f2f2f2; color:#333;font-size:24px;" alt="pInterest" title="pInterest" href="#">8</a> <a class="dc_socialpictogram round" style="background-color: #f2f2f2; color:#333;font-size:24px;" alt="Chat Online" title="Chat Online" href="#">f</a> <a class="dc_socialpictogram round" style="background-color: #f2f2f2; color:#333;font-size:24px;" alt="Phone" title="Phone" href="#">-</a> <a class="dc_socialpictogram round" style="background-color: #f2f2f2; color:#333;font-size:24px;" alt="YouTube" title="YouTube" href="#">y</a> <a class="dc_socialpictogram round" style="background-color: #f2f2f2; color:#333;font-size:24px;" alt="Vimeo" title="Vimeo" href="#">v</a> <a class="dc_socialpictogram round" style="background-color: #f2f2f2; color:#333;font-size:24px;" alt="flickr" title="flickr" href="#">n</a> <a class="dc_socialpictogram round" style="background-color: #f2f2f2; color:#333;font-size:24px;" alt="RSS" title="RSS" href="#">r</a> <a class="dc_socialpictogram round" style="background-color: #f2f2f2; color:#333;font-size:24px;" alt="Link" title="Link" href="#">@</a>

Pictogram Social (Custom: Teal + Round)

S s F t w + l ! 8 f - y v n r @

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="Email" title="Email" href="#">S</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="Skype" title="Skype" href="#">s</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="Facebook" title="Facebook" href="#">F</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="Twitter" title="Twitter" href="#">t</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="Blog" title="Blog" href="#">w</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="Google +1" title="Google +1" href="#">+</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="LinkedIn" title="LinkedIn" href="#">l</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="Place" title="Place" href="#">!</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="pInterest" title="pInterest" href="#">8</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="Chat Online" title="Chat Online" href="#">f</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="Phone" title="Phone" href="#">-</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="YouTube" title="YouTube" href="#">y</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="Vimeo" title="Vimeo" href="#">v</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="flickr" title="flickr" href="#">n</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="RSS" title="RSS" href="#">r</a> <a class="dc_socialpictogram round" style="background-color: #00aff0; color:#fff;font-size:24px;" alt="Link" title="Link" href="#">@</a>

Pictogram Social (Custom: Green + Round)

S s F t w + l ! 8 f - y v n r @

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="Email" title="Email" href="#">S</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="Skype" title="Skype" href="#">s</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="Facebook" title="Facebook" href="#">F</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="Twitter" title="Twitter" href="#">t</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="Blog" title="Blog" href="#">w</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="Google +1" title="Google +1" href="#">+</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="LinkedIn" title="LinkedIn" href="#">l</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="Place" title="Place" href="#">!</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="pInterest" title="pInterest" href="#">8</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="Chat Online" title="Chat Online" href="#">f</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="Phone" title="Phone" href="#">-</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="YouTube" title="YouTube" href="#">y</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="Vimeo" title="Vimeo" href="#">v</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="flickr" title="flickr" href="#">n</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="RSS" title="RSS" href="#">r</a> <a class="dc_socialpictogram round" style="background-color: #8abc2b; color:#fff;font-size:24px;" alt="Link" title="Link" href="#">@</a>

Pictogram Social (Custom: Red + Round)

S s F t w + l ! 8 f - y v n r @

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="Email" title="Email" href="#">S</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="Skype" title="Skype" href="#">s</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="Facebook" title="Facebook" href="#">F</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="Twitter" title="Twitter" href="#">t</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="Blog" title="Blog" href="#">w</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="Google +1" title="Google +1" href="#">+</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="LinkedIn" title="LinkedIn" href="#">l</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="Place" title="Place" href="#">!</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="pInterest" title="pInterest" href="#">8</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="Chat Online" title="Chat Online" href="#">f</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="Phone" title="Phone" href="#">-</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="YouTube" title="YouTube" href="#">y</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="Vimeo" title="Vimeo" href="#">v</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="flickr" title="flickr" href="#">n</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="RSS" title="RSS" href="#">r</a> <a class="dc_socialpictogram round" style="background-color: #d5342f; color:#fff;font-size:24px;" alt="Link" title="Link" href="#">@</a>

Pictogram Social (Custom: Black + Round)

S s F t w + l ! 8 f - y v n r @

View code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<a class="dc_socialpictogram round" style="background-color: #000; color:#fff;font-size:24px;" alt="Email" title="Email" href="#">S</a> <a class="dc_socialpictogram round" style="background-color: #000; color:#fff;font-size:24px;" alt="Skype" title="Skype" href="#">s</a> <a class="dc_socialpictogram round" style="background-color: #000; color:#fff;font-size:24px;" alt="Facebook" title="Facebook" href="#">F</a> <a class="dc_socialpictogram round" style="background-color: #000; color:#fff;font-size:24px;" alt="Twitter" title="Twitter" href="#">t</a> <a class="dc_socialpictogram round" style="background-color: #000; color:#fff;font-size:24px;" alt="Blog" title="Blog" href="#">w</a> <a class="dc_socialpictogram round" style="background-color: #000; color:#fff;font-size:24px;" alt="Google +1" title="Google +1" href="#">+</a> <a class="dc_socialpictogram round" style="background-color: #000; color:#fff;font-size:24px;" alt="LinkedIn" title="LinkedIn" href="#">l</a> <a class="dc_socialpictogram round" style="background-color: #000; color:#fff;font-size:24px;" alt="Place" title="Place" href="#">!</a> <a class="dc_socialpictogram round" style="background-color: #000; color:#fff;font-size:24px;" alt="pInterest" title="pInterest" href="#">8</a> <a class="dc_socialpictogram round" style="background-color: #000; color:#fff;font-size:24px;" alt="Chat Online" title="Chat Online" href="#">f</a> <a class="dc_socialpictogram round" style="background-color: #000; color:#fff;font-size:24px;" alt="Phone" title="Phone" href="#">-</a> <a class="dc_socialpictogram round" style="background-color: #000; color:#fff;font-size:24px;" alt="YouTube" title="YouTube" href="#">y</a> <a class="dc_socialpictogram round" style="background-color: #000; color:#fff;font-size:24px;" alt="Vimeo" title="Vimeo" href="#">v</a> <a class="dc_socialpictogram round" style="background-color: #000; color:#fff;font-size:24px;" alt="flickr" title="flickr" href="#">n</a> <a class="dc_socialpictogram round" style="background-color: #000; color:#fff;font-size:24px;" alt="RSS" title="RSS" href="#">r</a> <a class="dc_socialpictogram round" style="background-color: #000; color:#fff;font-size:24px;" alt="Link" title="Link" href="#">@</a>

© TemplateAccess