eos-icons-testo
Advanced tools
Demo: https://suse-uiux.gitlab.io/eos-icons/
This is the iconic font used in the EOS Design System. The official SUSE Linux Design System, and for all open source projects to use and re-use.
To view the EOS Design System project check gitlab https://gitlab.com/SUSE-UIUX/eos
Just like in any other iconic font, you need to add the Fonts and CSS files in your project:
1- Add the eos-icons.css file available under the dist/css folder into your projects <head>:
<link rel="stylesheet" href="assets/eos-icons.css">
2- Make sure the font files available in the dist/fonts folder are placed under your assets/fonts folder so the .css file can read them correctly.
3- Use the icons in your html as follows:
<i class="eos-icons"> LIGATURE_OF_THE_ICON</i>
Where the LIGATURE_OF_THE_ICON is the name of the icon. Use our online tool to see the icon's name: https://suse-uiux.gitlab.io/eos-icons/, or simply run open dist/index.html to see it locally.
If you want to create your own icons and add them to this library, follow the next steps:
This project uses Webfont for Grunt to build. More info about the project: https://www.npmjs.com/package/grunt-webfont
We use Fontforge to render our icons since the quality is better than using plain node, and it supports Ligatures. Our icons follow Google Material Icons guidelines one-to-one. This is the main reason for us to use ligatures as well. We made a perfectly compatible icon font for those already using MD icons. If you want to know more about all the standards we follow for the EOS, visit our public wiki, which is our main internal guideline: https://gitlab.com/SUSE-UIUX/eos/wikis/home
git clone git@gitlab.com:SUSE-UIUX/eos-icons.git
cd eos-icons
brew install node
npm install
Install the dependencies:
brew install ttfautohint fontforge --with-python
You will need to have Xcode installed. First install the command line tool:
xcode-select --install
And then download the latest version from:
https://developer.apple.com/xcode/
sudo apt-get install fontforge ttfautohint
Add your icons into the svg/ folder. All our icons have been designed with Illustrator, but designing with any tool like Inkscape will work just fine, just make sure the exported SVG code is as clean as possible.
SVG file names with more than one word in it should not have a minus character separating the words (e.g.: some-name.svg), instead, use an underscore (e.g.: some_name.svg). The use of spaces in the filename also creates conflicts in the resulting iconic font.
Then all you need to do, is run
grunt
This will build the assets under the dist/ folder.
Open the index.html in your browser to easily navigate the iconic font and check the look of the icons in different sizes.
open dist/index.html
We added the recommended sizes MD icons use: 18, 24, 36, and 48 pixels, plus 16px which is our minimum allowed size at EOS Design System.
That's it!!.. easy as pie
FAQs
The iconico fonto mado for much happiness. Konichi-wa!
We found that eos-icons-testo demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A surge of AI-generated vulnerability reports has pushed open source maintainers to rethink bug bounties and tighten security disclosure processes.
Product
Scan results now load faster and remain consistent over time, with stable URLs and on-demand rescans for fresh security data.
Product
Socket's new Alert Details page is designed to surface more context, with a clearer layout, reachability dependency chains, and structured review.