About 525icons
The latest version is v. 6.0 - updated in January 2022.
525icons is a very comprehensive and versatile collection of high quality icons, logos, symbols, pictograms, arrows and more, wrapped in one single font, designed for websites and apps. You may even use it as a dingbat font for use in your desktop applications, or download a package containing the separate svg files.
This site is completely free of ads or commercial interests. The project has emerged as a test project, in a teaching context and is now run as a hobby project. It's just for fun and a playground for learning CSS. In the previous edition of the site, we used Google Ads as an attempt, but it is not in use any more.
The designer is a norwegian visual artist (painter) and senior lecturer in high school, who teaches graphic design, web design and geography.
You may use the font and the SVG-files as you wish. The 525icons font is licensed under SIL OFL 1.1. The code and documentation is licensed under Creative Commons Attribution 4.0 International License: CC BY 4.0 - The license does not apply to copyrighted logos and brand icons.
BS/CSS Playground
Some of the icons and logos with colors (Bootstrap 5 carousel / animate.css)
How to
How to implement the icons on you site?
The 525icons css and font files are available at jsDelivr The free super-fast CDN for developers and webmasters.
You do not need to add the font files on your own server. It's sufficient to link the css file like this:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/runestro/525icons@6.0/fonts/525icons.min.css">
This line must be inside the <head> of your html.
If you want to place the font files on your own server, make sure the entire fonts directory from the zip-file '525icons.zip' is copied into your project. You will need the files:
- fonts/525icons.css
- fonts/525icons.eot
- fonts/525icons.svg
- fonts/525icons.ttf
- fonts/525icons.woff
- fonts/525icons.woff2
The css file must be in the same directory as the fonts. If not, you have to make changes in the code.
In the <head> of your html, reference the location to your 525icons.css and fonts.
<link rel="stylesheet" type='text/css' href="path/to/fonts/525icons.css">
You do not need the file 525icons.otf, unless you want to install it on your OS.
How to place the icons in your html-file:
If you are familiar with the use of the Font Awesome web font or the Bootstrap icons, the 525icons css code has some differences.
Like Font Awesome, 525icons is designed to be used with the inline element: <i>.
The icons are placed by adding the CSS prefix 'ux' plus the 'ico-' class prefix in front of the icons name,like in this example:
<i class="ux ico-yin-yang"></i>
And you may add additional classes, like here:
<i class="ux ico-yin-yang ux-2x black bg-orange rounded-circle"></i>
Accessibility
If you use an icon just to add some extra decoration or branding,
it does not need to be announced to users who are navigating your site aurally.
In that case, you should use the string: aria-hidden="true", like in this example:
<i class="ux ico-asterisk ux-2x" aria-hidden="true"></i>
If an icon conveys meaning in your content or interface,
ensure that this meaning is also conveyed to assistive technologies through alternative text, like in the use of the aria-label string, shown here:
<a href="#top" aria-label="Go to top">
<i class="ux ico-angle-double ux-rotate-90 ux-2x black" aria-hidden="true"></i>
</a>
Contact
Send a message