Share your code.
a set of brand & social icons made to fit and mirror the google material design icons. These icons are meant to be coupled with the MDI to offset the lack of brand & social options.
- Download and extract the repository
- Copy the
demo/icons.htmlto your project
- Include it using whatever template language your are working with after the
- Add icons to your page like so, use the id for the icon you want from the html file above
<svg class="icon"> <use xlink:href="#icon-id"></use> </svg>
- Use the
iconclass of the svg tag to style the icon.
- For more finite control over specific icons add more classes to the svg tags
- You can control the icon color using the css
Install using NPM
npm install brandicons
Want to contribute?
- Find an official source vector image.
- Use your SVG editor of choice to produce a monochrome icon (with a view to keeping the file size as small as possible).
- See CSS Tricks’s great article on manual SVG optimisation.
- Please center icons in a 24x24 pixel viewbox, for consistency. With a max height/width of 20px for the icon.
- Be sure to follow the google material design spec.
- Add your icon to the newest version of the sketch file.
- Submit an entry as a pull request containing the following information:
- The Brand title
- The HEX colour value
- The URL of the site/app the logo is for.
- 1.0.1 cleaner gulpfile & folder structure. improved readme.
- 2.0.0 improved process to accomodate page specific icons & moved documentation to its own branch. Detailed changelog & contributors
Note: All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by the author, nor vice versa.