tech-icons
tech-icons copied to clipboard
Highlight π¨ your skills in your GitHub profile or repository with these icons.
Showcase your skills right on your GitHub page!
Preamble
This project is created at your own discretion. It contains quite a large number of icons representing different programming languages, frameworks, technologies, social networks, databases and various tools. The icons are presented in standard image size so you can set their size to your liking. You can use them in your resumes or GitHub repositories to stand out from the crowd.
Documentation
- Example π
- Definition of icons βοΈ
- Resizing icons π
- Icons themes βοΈ
- Icons centering ποΈ
- How to find icon? π
- Ideas for improvement π‘
- Most popular icons π
- Support β¨
Example π
In this screenshot you can see how the icons in the README.md file look like.
Definition of iconsβοΈ
In order to add an icon to your repository or something else, copy the code below and remember to replace the value in the link after the last /
with your choice from the icons folder.
<a href="#"><img src="https://github.com/onemarc/tech-icons/blob/main/icons/NAME_OF_ICON.svg" width="50"></a>
If you can't insert the icon you want, try replacing "/blob" with "/raw" in the link.
Resizing icons π
How to change the icon size? - Follow the example below and set the width="VALUE"
parameter to its own value.
<a href="#"><img src="https://github.com/onemarc/tech-icons/blob/main/icons/NAME_OF_ICON.svg" width="50"></a>
Icons themes βοΈ
Among the images of icons there are also those located on different types of backgrounds, for example, on black, dark, white and in the color palette of the original icon. This will help you find what you are looking for.
An example of icons at once in three variants of themes:
Icons centering ποΈ
If you want to align the icons relative to the edge or center, add the following parameters to the <p>
tag:
- align="center" - to the center
- align="right" - to the right edge
- align="left" - to the left edge
<a href="#"><p align="center"><img src="https://github.com/onemarc/tech-icons/blob/main/icons/NAME_OF_ICON.svg"></p></a>
How to find icon? π
How to find the icon you need?
- To find an icon, you need to go to the icons folder and write the name of the technology/programming language/framework/social network or whatever you are looking for in the search box. In most cases, all icons are named according to their general name.Ideas for improvement π‘
If anyone has ideas for improving this project, please submit your ideas to issues or make pull requests.
Issue form:
- Come up with a clear title for the issue that explains its essence.
- Describe the problem or innovation and write what it is about.
- If you wish and detail the problem or innovation, you can add an image.
In this way, the problems you find or the proposed innovations will be formed in a structured way and will be considered faster.
Most popular icons π
Below is a small part of the commonly used icons.